I have an element on my page that i want to position using "position:absolute". Therefore, I have added "position: relative" to #pagewrap. I now want to do the same thing for other elements in the #page, but when I also add "position: relative" to that, all the elements before having #pagewrap as a parent now switches to #page.
The element I am talking about is: #copyright-logo
What do I do to avoid this?
#pagewrap {
width: 1050px;
margin: 0px auto;
background-color: rgb(255,255,255);
overflow: hidden;
-moz-border-radius: 15px;
border-radius: 15px;
position: relative;
}
#page {
width: 960px;
margin: 0px auto;
background-color: rgb(255,255,255);
overflow: hidden;
}
#copyright-logo {
position:absolute; bottom: 10px; right: 10px
}
Absolutely positioned elements are positioned relative to the nearest enclosing positioned element, which may be another absolutely positioned element or alternatively a fixed or a relatively positioned element.
CSS position property
Make your #copyright-logo the direct child of #pagewrap and not #page
<div id="pagewrap">
<div id="copyright-logo"></div>
<div id="page"></div>
</div>
You are overusing relative and absolute positionning.
There is absolutely no need to relatively position #pagewrap, simply center it with margins as in:
#pagewrap { width: 1000px; margin: 0 auto; }
In any case, don't overuse those positions but use floats and padding and margin.
Related
I have 3 divs on top of each other having following css.
.d1 {
position: relative;
background-color: yellow;
height: 50px;
width: 100px;
overflow: hidden;
}
.d2 {
position: absolute;
background-color: green;
height: 25px;
width: 50px;
}
.d3 {
position: absolute;
left: 83px;
}
and the divs that have classes are as follows:
<div class="d1">
<div class="d2">
<div class="d3">text</div>
</div>
</div>
and as a result I see content of d3 cut off because of overflow:hidden in d1.
How can I avoid cut off content of d3 without modifying d1?
Getting around the overflow..
An element can overflow from a relative or absolute positioned parent by setting its position to fixed. An element that has position: fixed will have the default left,right,top, and bottom styles set as auto. This will position .d3 to the top-left of .d2, and then the left: 83px style will push it to the left from there.
Making up the additional space..
However, to get that additional movement to the right as the original markup, you will need to add margin-left: 8px, which will make-up the additional ~8px needed to replicate the original. Further adjustments to the position of .d3 will need to be done by setting the margin style (see below).
Your updated code should look like this..
.d1 {
position: relative;
background-color: yellow;
height: 50px;
width: 100px;
overflow: hidden;
}
.d2 {
position: absolute;
background-color: green;
height: 25px;
width: 50px;
}
.d3 {
position: fixed;
margin-left: 8px;
left: 83px;
}
Some considerations and caveats..
As a previous commenter mentioned, best practice would be to fix your html markup because this solution could cause issues if you ever need to move the position of .d3. For example, setting left,right,top, or bottom will cause the default setting of this style, auto, from being unset, and the element will be positioned relative to the viewport rather than the parent relative or absolute element.
I have the following html and css. If I change the position attribute from absolute to relative, the div.raw seems to flow within the html layout and the background image doesn't cover up everything. If I do not, then it does. Why is this?
HTML:
<h1 class="push">Hello World</h1>
<div class="container">
Some text
<div class="raw"></div>
</div>
CSS:
.push {
margin-bottom: 50px;
margin-top: 50px;
}
.container {
margin-top: 50px;
width: 500px;
height: 500px;
margin-bottom: 50px;
}
.raw {
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
background-size: auto;
background-image: url("http://st-im.kinopoisk.ru/im/wallpaper/2/3/0/kinopoisk.ru-True-Detective-2300505--w--1280.jpg");
//background-repeat: no-repeat;
overflow: hidden;
width: 50%;
height: 100%;}
Absolute positioned elements position fixed to their ancestor which need to have a positioning. in your case the ancestor 'container' has no position so div.raw positions itself like fixed to the viewport. in fact if you set raw's position to fixed you see that it is the same as absolute. however once you set a position to container (relative for instance) that absolute and fixed makes difference.
same result here with absolute
http://jsfiddle.net/btevfik/0ugp2p2w/2/
once you put this
.container {
position:relative;
}
notice the result is different
http://jsfiddle.net/btevfik/0ugp2p2w/
http://jsfiddle.net/btevfik/0ugp2p2w/1/
http://jsfiddle.net/btevfik/0ugp2p2w/3/
Because the absolute positioned element's relative dimensions are related to whole document, relative positioned element's relative dimensions are related to its parent element.
How to make the <div> inside wrapper bigger than wrapper itself without change the structure?
HTML
<div class="page row1">
<div class="home-wrapper row2">
<div class="home-slider row3"></div>
</div>
<div>
CSS
.page { width: 100%; height: 400px; border: 1px solid #000; background: #eee; }
.home-wrapper { width: 90%; height: 400px;border: 1px solid red; background: #ccc; margin: 0 auto;}
.home-slider{ width: 100%; height: 200px; border: 1px solid blue; background:#000; }
http://jsfiddle.net/46vpqmgh/1/
I want the black box is same width with the page <div> without change the structure, using only CSS.
Thanks
Add:
position: absolute to .home-slider to pull it out of the normal flow
top: 0 and left: 0 to .home-slider to position it correctly
position: relative to .page to make it's children absolute positioned elements relative to it
Percentage height and width will be calculated based on the size of .page.
Have a fiddle!
Added CSS
.page {
position: relative;
}
.home-slider {
position: absolute;
left: 0;
top: 0;
}
Read more about the CSS position property over on the MDN
Absolute positioning
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
In our example above, the nearest positioned "ancestor" is .page
Add the following properties. Looks fair to me.
.home-slider {
/* ... */
z-index: 1;
margin-left: -5%;
position: fixed;
}
Change the following class:
.home-slider {
width: 100%;
height: 200px;
border: 1px solid blue;
background:#000;
position: absolute;/*Add position absolute*/
left: 0;/*Add left to 0*/
}
fiddle
Is it possible to make multiple absolute-positioned divs overlap multiple relative-positioned divs in IE6 & IE7?
See this jsFiddle for more information: http://jsfiddle.net/btker/1/
HTML
<div class="wrapper">
<div class="relative_div">Relative div.
<div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
</div>
</div>
<div class="wrapper">
<div class="relative_div">Relative div.
<div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
</div>
</div>
CSS
.wrapper{
height: 100%;
width: 100%;
}
.relative_div {
height: 75px;
width: 200px;
border: 1px solid #000;
padding: 10px;
background: #e6e6e6;
margin: 0 0 35px 0;
position: relative;
}
.absolute_div {
height: 100px;
width: 250px;
border: 1px solid #000;
background: #c6c6c6;
padding: 10px;
position: absolute;
top: 40px;
left: 100px;
z-index: 100;
}
There are two relative <div>s (placed in identical wrappers) containing each one a absolute <div> that overlap all the relative <div>s. This works great without any problems in updated versions of Chrome, Firefox etc, the absolute <div> with z-index is always placed on top.
In IE6 and IE7 this is not working. The different between this problem and the standard "dropdown in header display its menus behind the page content" is that in those situations its often fixed by give the parent element of that specific menu other z-index etc. In this case the both absolute <div>s are put in identical <div>s.
Can this be solved so the absolute <div>s are always on top of all relative <div>s in IE6 & IE7? Conditional comments for IE can be used to make the solution cross-browser.
It is possible but only by decreasing the z-index of the second .wrapper or increasing the z-index of the first .wrapper.
On a simple level, each positioned element with a non-auto z-index creates a new stacking context, although there are other circumstances in which a new stacking context is created - see The stacking context.
The problem is one that affects IE <= 7, from quirksmode.org
In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn't work correctly.
CSS
.wrapper{
height: 100%;
width: 100%;
}
.lower {
position: relative;
z-index: -1;
}
.higher {
position: relative;
z-index: 2;
}
.relative_div {
height: 75px;
width: 200px;
border: 1px solid #000;
padding: 10px;
background: #e6e6e6;
margin: 0 0 35px 0;
position: relative;
}
.absolute_div {
height: 100px;
width: 250px;
border: 1px solid #000;
background: #c6c6c6;
padding: 10px;
position: absolute;
top: 40px;
left: 100px;
z-index: 1;
}
HTML
<div class="wrapper"> <!-- add higher class here -->
<div class="relative_div">Relative div.
<div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
</div>
</div>
<div class="wrapper"> <!-- or add lower class here -->
<div class="relative_div">Relative div.
<div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
</div>
</div>
My HTML:
<div class="outer">
<div class="inner">
Lorem Ipsum
<div class="innerest">
<!-- no content -->
</div>
</div>
<div class="inner">
Lorem Ipsum
<div class="innerest">
<!-- no content -->
</div>
</div>
</div>
My CSS:
.outer {
background: red;
padding: 6px 20px;
z-index: 10;
overflow: hidden;
}
.inner {
background: green;
z-index: 11;
float: left;
margin-left: 12px;
}
.innerest {
background: blue;
width: 30px;
height: 20px;
z-index: 9;
position: absolute;
}
Here's a fiddle: http://jsfiddle.net/jsnlry/ycJdy/
I want the blue boxes to be behind the red one. It seems, that z-index is ignored in this case. But why?
Any idea?
In this example z-index only works on the position:absolute element. Try putting a negative value like -9 and it should work.
Do you mean like this:
http://jsfiddle.net/audetwebdesign/WJzRY/
.innerest {
z-index: -1;
}
Why This Works...
By default, z-index is auto which computes to 0, all elements have the same stacking level.
In my fiddle, I set up a sequence of styles to show what is happening.
You start off with a parent div with two floated children which are out of flow, and the parent height collapses to 12px high because of the padding (Ex 1).
When you declare overflow: hidden, you start a new block formatting context and the floated child elements are retained in the context of the parent, which is why the red background fully covers the child elements (Ex 2).
Finally, you can add absolute positioning to the .innerest elements, and this takes them out of the flow and they project out of the .outer ancestor element. Note that the floated elements affect the computed height of the containing block, unlike absolutely positioned elements. On the right .innerest element, you add z-index: -1 which places this element below all the other elements in the stacking order (computed to 0), so you get the desired effect.
Reference
http://www.w3.org/TR/CSS2/visuren.html#layers
Please add z-index: -1 to innerest class. it will be work.
.innerest {
background: blue;
width: 30px;
height: 20px;
z-index: -1;
position: absolute;
}
Try adding a negative z-index (-1) to your .innerest class.
Now used to this code define your .outer class position relative and remove overflow hidden
.outer {
background: red;
padding: 6px 20px;
position:relative; //add this line
}
.outer:after{
content:"";
clear:both;
overflow:hidden;
display:table;
}
.innerest {
z-index: -1; // add this line
position: absolute;
}
Demo