I want to fade out the top and bottom of two separate divs.
Right now I'm trying to use position:absolute and top:1px on the top one and bottom: 1px on the bottom one. Was not working for me, uses the parent div? Which was causing them to show up in the wrong places.
This fiddle shows where I am:
http://jsfiddle.net/mstefanko/23mfk/
What I want is for the top and bottom of each div to have the fade demonstrated in the fiddle.
Your .inner-1 and .inner-2 both have absolutely positioned elements within them. These elements are being positioned in relation to the viewport, and not their parent. You'll need to set .inner-1 and .inner-2 to a relative position:
.inner-1,
.inner-2 {
position: relative;
}
This will cause the gradient elements to appear at the top and bottom of these containers.
Demo: http://jsfiddle.net/23mfk/1/
Related
I've looked at similar posts here, but can't seem to apply the concept correctly. I am wanting to append a small image to the bottom of a div to create a border effect on the div. I'm trying to use ::after, 'content' and relative positioning to the div, but it only get's me close. The div has a considerable amount of top/bottom padding. So when I try to add the image to the bottom of the div, it only adds it to the bottom of the div before the padding starts. I tried absolute positioning for the image and it ended up being at the bottom of the page and not the bottom of the div. Any ideas? Here is a reference for the page I'm working on. The image has been given a red background (halfway down the page for easy reference). http://www.staging.sarahandrachel.com/about/
Here is the markup for the div.
#block-4a4b3b44-9188-4b95-9678-d896851e0c54::after {
content: url('http://www.staging.sarahandrachel.com/wp-
content/uploads/2017/08/header-bottom-frame.png');
position: relative;
bottom: 0px !important;
left: calc(50% - 40px);
z-index: 9999;
background: red;
}
Any ideas?
I have a Bootstrap Navbar with two menu elements aligned to the right:
The point is that I would like those elements to be aligned to the inferior border of the bar and I would prefer using absolute positioning rather than playing with their padding and margins. As you can see in the Firebug screenshot below those menu items are childs of a div that covers the precise area where I would like to position them (for those not familiar with firebug the blueish area corresponds to the browser position of the underlined code):
Now, my question is, why adding the css .nav.navbar-nav.navbar-right{ position: absolute; bottom: 0px; right: 0px; width: 230px; } results in the menu elements moving further to the right of the area of its parent? I would expect them only to move down, not right. (Result shown below with firebug still shadowing its parent position).
Disclaimer: As you can check below (another firebug screenshot) .nav.navbar-nav.navbar-right corresponds indeed to the child of the previously underlined div:
Bonus: Any help moving down these menu elements without using padding and margins and keeping them within their parent's area will be appreciated.
An absolute positioned element is generally not influenced by any other element. To get it working, give the parent element a position: relative;.
.navbar-collapse {
position: relative;
}
Then the absolute positioned element is dependent on its parent element.
I am trying to position this sale banner over the image. The red border is a fixed width div that is as wide as I need for the page layout. No matter what the size of the image is, I need to keep a space as wide as this.
The black border is a div that is only as wide as the picture, which I am trying to display the sale banner in the upper right corner on top of the picture.
EXAMPLE: http://jsfiddle.net/d5nxT/
I know I'm getting something messed up with the displays & positions. I just need the image & sale span to have the same settings, except the sale span floats to the right and has a higher z-index than the image.
See the fiddle and demo:
fiddle: http://jsfiddle.net/d5nxT/2/
Demo: http://jsfiddle.net/d5nxT/2/embedded/result/
float:right, z-index, position:relative, display:inline-block all are not required.
You need to position:absolute the sale span like this fiddle
You should change the css of the sale span to the following:
span.onsale {
display: inline-block;
width: 59px;
height: 59px;
z-index: 10;
background: url(http://i42.tinypic.com/sq49ow.png) no-repeat;
position:absolute;
top:0;
right:0;
}
This way the sale image is place in the top right corner of the parent image (hence the top:0 and right:0 styles)
There are 2 things that need to be done to do this kind of placements flawlessly.
You need a positioned (not fixed) element as a parent.
Your child needs to become absolute.
If you ensure these 2 things you will be able to position child elements relative to the parent with the top, left, bottom and right properties in css.
For you that probably means div.interior-images needs to get the property position: relative. And span.onsale gets the properties position: absolute and right: 0.
Your altered jsfiddle can be found here
I've got a project where I need to top-right align a div so that it sits on top of an existing variable-width td.
What has me stumped is the variable width aspect. I can get the div to sit on top of the existing relatively positioned td by using fixed positioning for the div. However, because the TD width can change I can't set a "left:" value for the div.
I've created a fiddle to demonstrate it with left aligned in the td, now I just need to get it to right align:
jsfiddle.net/ErDr6/36/
I've looked at some other posts, but they seem to deal with fixed width elements:
Align div with fixed position on the right side
Firstly, change position: fixed; to position: absolute; so that the arrows won't stay fixed relative to the viewport when the page scrolls. Then, add the following:
#col_arrow {
right: 0;
}
.wc-day-column-header {
position: relative;
}
That will align the arrow to the right of its parent. We add position: relative; to the parent to restrict it to that container.
If it needs to be dynamic then absolute position can be calculated as:
theTD.offsetLeft+theTD.offsetWidth-arrow.offsetWidth
please see my fiddle: http://jsfiddle.net/qVHg8/1/
Why isn't the fixedRightCol being positioned at right:0 of the outer container div? Right now it's going outside of the container div which I don't want.
I could use position absolute, which puts the fixedRightCol in the right position but scrolls. I want the fixedRightCol to be fixed (no scroll).
so how can I get fixedRightCol position correctly and fixed on scroll?
Thanks
If you want the green div to be fixed inside the red div, you need to use position: absolute;
http://jsfiddle.net/qVHg8/2/
position: fixed; fixes the element to the viewport, rather than the parent.
EDIT:
If you're able to use a bit of javascript & jQuery, then this will work with your dynamic margins:
$(function(){
$('.fixedRightCol').css({right: $('.container').offset().left});
});
What thats doing is setting the right CSS property to be the calculated left property of the container. As the margins are the same on both side (auto), then this will shit the red div to the correct position.
http://jsfiddle.net/qVHg8/4/ is a working example of this.
When you give something a position fixed, it breaks out of any divs it may be in.
Edit:
You could just do this:
.fixedRightCol{
position: fixed;
margin-left: 350px;
width: 50px;
background: green;
}
Use margin-left: 350px; for green box with NO right: 0px; or anything...
i think you are meaning to use position:absolute;