Hello,
So I bumped into quite an interesting problem today. I am not sure I got it right, nor am I sure what is actually happening in the background. I did not find any article answering my question. So here it is :
Let's say I have a page very very simple, something like:
<html style="height:100%;">
<body style="height:100%;">
<div style="height:2000px;"></div>
<test style="position:absolute; bottom:0;"></test>
</body>
</html>
So I did not set any element as relative.
What I was expecting :
My test should be positioned relatively to the body element. So at the very end of my page.
What seemed to happen: My div was positioned relatively to the viewport (???)
So instead of being at the very end of the page. it was Xpx from the top.
so if Im on a browser with 900px height, then the element is positioned 900px from the top, and stays there if I scroll.
So sorry if this aint clear. I can specify if needed. Any explanation ?
An absolutely positioned element will be positioned in terms of the nearest relatively positioned ancestor in the flow. Make sure one of the parent wrappers has position set to relative.
In this fiddle the element is at the bottom:
http://jsfiddle.net/L51u8qhz/
<div class="html" style="height:100%;">
<div class="body" style="height:100%; position: relative;">
<div style="height:2000px;"></div>
<div style="position:absolute; bottom:0; background: #000; height: 10px; width: 100px;"></div>
</div>
</div>
From MDN
The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static). If a positioned ancestor doesn't exist, the initial container is used.
Now, the initial container is the box of the size of viewport. It will not move even when you scroll.
So, if there is no containing block for the absolute positioned element, then position will be w.r.t the region bounded by the viewport.
Recommended solution is to set position to a parent (mostly it's body) other than static(mostly it's relative)
Related
In an application I am working I found a top level parent container with position: relative like so:
<div style="position: relative">
<!--render body content here-->
</div>
Many HTML views are rendered in this parent container. Not single HTML has absolute positioning.
This is not my code, so I want to make sure that the inline CSS style="position: relative" serves no purpose and can be deleted.
There isn't a point to a parent container have position:relative if there is not descendants with position:absolute or position:relative, correct? As there is not any child container that has position defined at all, that I can find.
How do I keep the footer on the bottom without being affected by the position:absolute element. Right now, the footer's position is relative and apparently the box with absolute:position create its own stacking context and overflow the footer.
The html looks like below
<div style="position:relative">
<div style="position:absolute">
</div>
</div>
<footer style="position:relative">
</footer>
Position absolute elements don't have dimension. (height & width).
So in order to stack correctly, you have to :
give height for your absolute position element.
or
Add margin-top on your footer element based on your absolute position element height
When you use position absolute it is absolute positioned to the nearest ancestor element which has relatively positioned. You can have your footer not disturbed by enclosing your absolute div inside a relatively positioned div.
If you don't want to do that change you can move the element using margins and left,right,top and bottom properties.
I'd like to tie the two logos at the bottom together so they are in the same position relative to the text.
I'd preferably prefer some kind of explanation as well as just code so I can learn from this.
Relevant HTML:
<div id="twitterdiv"><img id="twitter" src="images/Twitter_white.png" ></div>
<div id="instagramdiv"><img id="instagram" src="images/instagram_white.png"></div>
Relevant CSS:
#instagramdiv {
right: 50%;
position: absolute
}
#twitterdiv {
position: absolute;
right: 55%;
}
Here absolutely positioned element will do the trick. In fact, this is typical situation when one element must be positioned such as "sticky" in relation to some other. Keeping in mind definition of absolute position "The element is positioned relative to its first positioned (not static) ancestor element", all you need to do is wrap your "l" letter and images in the same container (parent), then give the parent container relative position and your images - absolute position and finally set left and top properties (if needed): jsfiddle
<div>app<span class="parentContainer">l
<div class="positionedContainer">
<img id="twitter" src="images/Twitter_white.png"/>
<img id="instagram" src="images/instagram_white.png" />
</div>
</span>
elemontomato</div>
I want my element with class "not-absolute" to be positioned normally as its siblings siblings element would be positioned static.Now, since its siblings are positioned absolute, the element not-absolute overlaps with the element positioned absolute.
How do i fix this such that the element would take its normal position all it siblings would be positioned static?
<html>
<head>
<style type="text/css">
.world{width:1000px;position:relative;border:1px solid black;height:200px;}
.world .child{position:absolute}
.animal{left:0px;}
.tree{left:200px;}
.water{left:500px;}
.not-absolute{position:relative;float:left}
</style>
</head>
<body>
<div class='world'>
<div class='child animal'> Absolute</div>
<div class='child tree'> Absolute</div>
<div class='child water'>Absolute</div>
<div class='not-absolute'>Not Absolute</div>
</div>
</body>
</html>
If I got it right, I'm afraid, you are asking for impossible. When positioned absolute, elements are removed from the flow, so the normal position of non-absolute element changes also.
Is it possible to set position:relative currently absolutely positioned elements? That will allow to keep non-absolute element position in a flow.
You can also try to position your non-absolute element, or leave current .child absolutes with position:static and use their :before/:after pseudo-elements to do the job.
I've discovered that I can't position one absolutely positioned div over another in Chrome when the parent of the div I want to be on top is fixed:
<div id="parent">
<div id="top"></div>
</div>
<div id="bottom"></div>
Here's a JSFiddle demonstrating the problem:
http://jsfiddle.net/SEJhg/
You should see that in Chrome the yellow absolutely positioned div with z-index 10 appears behind the green absolutely positioned div with z-index: 1, because of the fixed position of the parent.
Other browsers like Firefox show the yellow div on top of the green one.
Any suggestions on how to fix this in Chrome? I'm not able to alter the fixed position of the parent.
Thanks!
What you are experiencing is a relatively new behaviour in Chrome, introduced to align desktop browser behaviour with mobile browsers.
When an element has position: fixed; like your #parent, a new stacking context is created for that element, which means that the element and its children is stacked relatively to each other instead of relatively to the window context. Therefore, an element that is not a child of the fixed element (#bottom) cannot be placed "in between" #parent and #top.
Your solution would be to either move the #bottom inside #parent (putting it in the same stacking context), or changing the positioning method of #parent to something else than fixed.
The proposal for this change in Chrome can be found here: http://lists.w3.org/Archives/Public/www-style/2012May/0473.html
I have fiddled around with this and the conclusion I have come to is that that in chrome the parent and top elements are inseperable. What I tried to come to this conclusion was putting the bottom element above the parent "sandwich" and fiddling with z-indexes. I can make bottom appear above or below the sandwich, but not directly in it.
What did work for me was this:
<div id="parent">
<div id="bottom"></div>
<div id="top"></div>
</div>
I don't know the context of your page so this may be a useless response for you, but I think that doing this and then adjusting positioning to get the desired result in the x and y axes of the page will be easier than trying to slip the element in the sandwich from outside as you had hoped.
Cthe position only for chrome:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#parent {
position: absolute;
}
}
See http://jsfiddle.net/5fKq6/ in all browsers.
Try this code:
<div id="parent">
<div id="bottom"></div>
</div>
<div id="top"></div>
I am using Chrome version: 21.0.1180.89 m and the yellow is positioned above the green.