I am trying to create two <div>'s that overlap. The only problem is that the second <div> is in front of the first <div> and it has to be the other way around. I've tried setting the z-index of the first <div> to 1 but it still does not work.
Here is my code:
#content{
background-color:pink;
overflow:auto;
position:relative;
}
#content_1{
width:400px;
height:1600px;
background-color:#000099;
margin:0 auto;
z-index:1;
}
nav{
width:300px;
height:500px;
background-color:yellow;
position:absolute;
top:0;
right:200px;
z-index:0;
}
<div id="container">
<header> </header>
<div id="content">
<div id="content_1"></div>
<nav></nav>
</div>
<footer></footer>
</div>
How can I make the first div overlap the second?
z-indexing works when both elements share the same stacking context, both are positioned (relative or absolute), and both have a z-index attribute applied. In this case you've only applied the positioning and z indexing attributes to one.
add position absolute to content_1 or add position relative
Related
This question already has an answer here:
Understanding z-index stacking order
(1 answer)
Closed 5 years ago.
I was very surprised today when an element with a transform that isn't none didn't stack above an element with a position that is absolute despite having a higher z-index. However, adding position:absolute|relative to the former element made z-index perform as expected between them.
Take a look: I expected in the following for the green square (with transform:translateX(0)) to stack above them all the others from having the highest z-index, but it only stacks above the blue square which precedes it in the DOM. I attribute it to the blue square having z-index:0 and some degenerate behavior, as though both have z-index:0.
div {
opacity:0.8;
width:100px;
height:100px;
}
body {
margin:10px;
}
<div style="background-color:blue; position:absolute; top:0px; left:0px; z-index:0;">
</div>
<div style="background-color:green; transform:translateX(0); z-index:2;">
</div>
<div style="background-color:red; position:absolute; top:20px; left:20px; z-index:1;">
</div>
My expectation was that all of the elements above are in the root stacking context. What's going on?
z-index works on flex items and positioned elements(an element is “positioned” means that it has a position value other than static, e.g., relative, absolute and fixed).
If you try to set a z-index on an element with no position specified, it will do nothing.
So, just set position of green div to relative/absolute/fixed, it will be stack on top of all the div.
div {
opacity:0.8;
width:100px;
height:100px;
}
body {
margin:10px;
}
<div style="background-color:blue; position:absolute; top:0px; left:0px; z-index:0;">
</div>
<div style="background-color:green;position:relative; transform:translateX(0); z-index:2;">
</div>
<div style="background-color:red; position:absolute; top:20px; left:20px; z-index:1;">
</div>
So here's my code
<style>
body{
width:100%;
height:100%;
overflow:hidden;
}
.mouse{
background-color: rgb(128,64,0);
border-radius:100px;
height:100%;
width:10%;
position:absolute;
top:100%;
box-sizing:border-box;
}
.left_ear{
background-color: red;
border-radius:100px;
position:absolute;
float:left;
width:30%;
padding:100%;
}
</style>
</head>
<body>
<div class="mouse" id="mouse1">
<div class="left_ear"></div>
<div class="right_ear"></div>
</div>
<!--<div class="mouse" id="mouse2">
<div class="left_ear"></div>
<div class="right_ear"></div>
</div>
<div class="mouse" id="mouse3">
<div class="left_ear"></div>
<div class="right_ear"></div>
</div>-->
</body>
</html>
This is what I get with:
Padding: 100%
Padding: 30%
So how does padding work? I mean I know the basics that it'll increase the surrounding area of the element, but never increases the element's size.
Let's say you got elements like this:
.parent{
padding:20px;
background:blue;
display:inline-block;
}
.parent div{
padding:20px;
height:80px;
width:80px;
}
.child1{
background:green;
box-sizing:border-box;
}
.child2{
background:purple;
}
<div class="parent">
<div class="child1"></div><br>
<div class="child2"></div>
</div>
As you can see, the first child is smaller than the second one, although they got the exact same size and padding.
On the first child I used the property box-sizing:border-box. What this does, it includes the padding in the elements width/height.
If you don't do that, the padding gets added to the elements width.
In your example, you got box-sizing:border-box on the parent element. So if you added margin to that element, it'd stay the same size (except you set more padding than the element is big). On your children, you haven't got this property, so their size gets increased, when using padding.
I needed the items in an array of elements to contain 2 things: one element that would be in the regular flow of things and another that was absolute relative to the array container. Fiddling around with position: relative/absolute/fixed, I stumbled on this:
html:
<div class="mainContainer">
<div class="flexItem">
stuff1
<div class="itemContent" style="color:blue">
I'm positioned absolutely, relative to the main container
</div>
</div>
<div class="flexItem">
stuff2
<div class="itemContent" style="color:red">
I'm positioned absolutely, relative to the main container too!
</div>
</div>
</div>
css:
.mainContainer {
width:60%;
margin-left:20%;
position:relative;
border:1px solid black;
display:flex;
justify-content:space-around;
}
.flexItem {
position:static;
}
.itemContent {
position:absolute;
left:0px;
top:20px;
}
https://jsfiddle.net/ruzexo2r/
Its as if an element with position:absolute has any parent with position:relative with nothing in between but position:fixed then they behave just like the absolute/relative elements were immediately related. I didn't find an explicit confirmation about this behavior though so I'm asking whether or not I can count on that to keep on working?
I'm trying to play with positioning in css and I noticed something that confused me. It's probably a dumb question...but I'm having trouble understanding it.
I created three divs with the width and height of 50px with different background colors. When I position the third div up -60px using margin-top, the third div is on top of the second div. However, when I make the first and second divs inline elements, then both the first two divs are now on top of the third one.
Can someone please explain this concept to me?
<head>
<style>
<!-- Divs with the same width and height. Second one where both the first two divs are inline below this one. -->
#one{
background-color:red;
width:50px;
height:50px;
}
#two{background-color:blue;
width:50px;
height:50px;
}
#three{background-color:green;
width:50px;
height:50px;
margin-top:-60px;
}
</style>
</head>
<body>
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
</body>
<head>
<style>
<!-- First two divs are inline -->
#one{
background-color:red;
width:50px;
height:50px;
}
#two{background-color:blue;
width:50px;
height:50px;
}
#one, #two{display:inline-block;}
#three{background-color:green;
width:50px;
height:50px;
margin-top:-60px;
}
</style>
</head>
<body>
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
</body>
I think there are two issues going on here. One is that by leaving the third div display:block it will naturally wrap the first two divs. For a quick primer on blockvs inline-block see here.
The second part of this is that you have margin-top: -60px while having height: 50px. The negative margin is basically moving it higher up the page. This means the green box will apear 10px higher than the red one (-60 + 50 = -10).
Example Fiddle - I've added margin-left: -5px; and you can see the third div peeking out from under the first.
I have this markup:
<body>
<div class="prevBtn"> <a> < </a> </div>
<div id="player"> some code </div>
<div class="nextBtn"> <a> > </a> </div>
</body>
I'm trying to get this layout:
Note: The previos and the next button are close to the #player
And i'm trying like this:
.nextBtn{
float:left;
width:15%;
margin-top:180px;
}
.nextBtn a{
float:right;
}
.player{
float:left;
width:70%;
margin-top:100px;
}
.prevBtn{
float:right;
width:15%;
margin-top:180px;
}
.rightBtn a{
float:left;
}
the problem is that it doesn't stay like the layout if the resolution is too big or too small,
How can I achieve this for any resolution?
surround it with a div with 770px + the left and right buttons width (change their widths from percent to a fixed width).
This will guarantee all are together.
Also use a overflow: hidden or a div with clear:both at the end, this will make sure everything is in place.