I'm trying to figure out why the z-index property won't work. According to the mdn docs, as long as they are positioned elements, with a z-index, it should work. I have 3 divs, each nested in each other. I am just trying to get the z-index to work, so I give the .outer-div a z-index: 3 while giving the .inner-div a z-index: 1. According to the docs, the greater the z-index, the closer it is to the observer. Doesn't that mean the purple in the .outer-div should cover up the red div in .inner-div?
.outer-div {
height: 200px;
width: 200px;
background: purple;
position: relative;
z-index: 3;
border: 1px purple dotted;
}
.middle-div {
height: 150px;
width: 150px;
background: blue;
position: relative;
z-index: 2;
border: 1px
}
.inner-div {
height: 100px;
width: 100px;
background: red;
position: relative;
z-index: 1;
border: 1px
}
<div class="outer-div">
<div class="middle-div">
<div class="inner-div"> </div>
</div>
</div>
If you want to achieve this functionality, you should make some changes. By default, HTML behaviour is only the last(child) element will populate on top.
If you do like below, it will work :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>demo!</title>
<style>
.outer-div {
height: 200px;
width: 200px;
background: purple;
position: relative;
z-index: 3;
border: 1px purple dotted;
}
.middle-div {
height: 150px;
width: 150px;
background: blue;
position: relative;
z-index: 2;
border: 1px
}
.inner-div {
height: 100px;
width: 100px;
background: red;
position: relative;
z-index: 1;
border: 1px
}
.visual{
opacity: 0.7;
}
</style>
</head>
<body>
<!-- <div id="example"></div> -->
<div class="outer-div">
<div class="middle-div">
<div class="inner-div"> </div>
</div>
</div>
<div class="outer-div visual"></div>
<div class="middle-div visual" style="top:-150px; z-index: 2;"></div>
<div class="inner-div visual" style="top:-250px; z-index: 1;"></div>
</body>
</html>
Hope, I understood the problem and hope this would help
Related
Using css,
I want the the div(.scroll-indicator) to always cover parent div(.scroll-container), but when you scroll you see that it scrolls along with its content.
https://jsfiddle.net/vish6263/srnjyvtm/16/
Basically position: sticky is a hybrid of relative and fixed
Is there a solution for a hybrid of absolute and fixed?
Update: I already have it working by wrapping it without another container but since this is a re-usable component I am developing I didn want to add another layer inbetween, so was wondering if there is a solution using CSS only?
.scroll-container {
position: relative;
width: 200px;
height: 200px;
overflow: auto;
border: 1px solid blue;
}
.scroll-item {
height: 50px;
}
.scroll-indicator {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 1px solid red;
}
<div class='scroll-container'>
<div class='scroll-indicator'>
</div>
<div class='scroll-item'>item1</div>
<div class='scroll-item'>item2</div>
<div class='scroll-item'>item3</div>
<div class='scroll-item'>item4</div>
<div class='scroll-item'>item5</div>
<div class='scroll-item'>item6</div>
</div>
If you know the height you can try the following:
.scroll-container {
--h: 200px; /* the height */
position: relative;
width: 200px;
height: var(--h);
overflow: auto;
border: 1px solid blue;
}
.scroll-item {
height: 50px;
}
.scroll-indicator {
position: sticky;
top: 0;
height: inherit;
margin-bottom: calc(-1*var(--h));
border: 1px solid red;
box-sizing: border-box;
pointer-events: none
}
<div class='scroll-container'>
<div class='scroll-indicator'>
</div>
<div class='scroll-item'>item1</div>
<div class='scroll-item'>item2</div>
<div class='scroll-item'>item3</div>
<div class='scroll-item'>item4</div>
<div class='scroll-item'>item5</div>
<div class='scroll-item'>item6</div>
</div>
Wrap the items in another div;
.scroll-container {
position: relative;
width: 200px;
height: 200px;
border: 1px solid blue;
display: flex;
}
.scroll-item {
height: 50px;
font-size: 20px;
}
.scroll-indicator {
position: absolute;
width: 100px;
height: calc(100% - 20px);
top: 0;
left: 0;
border: 1px solid red;
pointer-events: none;
}
.scroll-items {
overflow-y: auto;
display: flex;
}
<div class='scroll-container'>
<div class='scroll-indicator'>
</div>
<div class="scroll-items">
<div class='scroll-item'>item1</div>
<div class='scroll-item'>item2</div>
<div class='scroll-item'>item3</div>
<div class='scroll-item'>item4</div>
<div class='scroll-item'>item5</div>
<div class='scroll-item'>item6</div>
</div>
</div>
Edit: fixed issue because I forgot to update it from my JsFiddle
How to position divs above the intersection of 2 other divs ?
I did try with relative and absolute positioning. But wasn't able to achieve a good result.
I have tried with relative and absolute positions in div1, div3 and I kept div3 inside div1 and increased its height. But after I placed the contents in div2 and tried to do a similar structure, the alinment got completly distorted.
Can anyone please help me with some better approach? Can it be acheived by css grids ?
Use this code.. it will help you....
.div1 {
background-color: yellow;
height: 100px;
border: 1px solid #000;
position: relative;
}
.div-2-half {
background-color: #fff;
height: 100px;
border: 1px solid #000;
width: 49%;
float: left;
}
.div2 {
width: 80%;
margin: 0 auto;
position: absolute;
background: transparent;
left: 0;
right: 0;
bottom: 41px;
}
.div3 {
background-color: #fff;
height: 100px;
border: 1px solid #000;
}
.div4 {
width: 100px;
border: 1px solid #000;
position: absolute;
left: 23px;
}
.div-container {
position: relative;
}
<div class="div1">
<p>div 1</p>
</div>
<div class="div-container">
<div class="div2">
<div class="div-2-half">
<p>div 2</p>
<div class="div4">div4</div>
</div>
<div class="div-2-half"><p>div 2</p></div>
</div>
<div class="div3"><p style="text-align:center; padding-top: 50px;">div 3</p></div>
</div>
I'm trying to place text over an image (simplified as a div here) that I can blur and set other filters on, but I want that text to be relatively positioned so that the parent container can resize.
#container {
position: relative;
width: 100%;
background: red;
height: 300px; /* For display sample purposes--no height is defined in production */
}
.bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: blue;
opacity: 0.5;
}
.content {
color: white;
font-weight: bold;
font-size: 3em;
}
<div id="container">
<div class="bg"></div>
<div class="content">
asdasdasdasd
</div>
</div>
This causes the blue bg to be displayed over the content. I know that I can have the content div be also absolutely positioned, but then the container's height won't change.
How can I accomplish what I'm looking for?
Fiddle
Add following style to .content class
.content {
position: relative;
z-index: 1;
}
I think this stuff will work for you and i hope it will be helpful to you. just try it.
#main {
position: relative;
height: 200px;
width: 200px;
border: 2px solid #aaa;
text-align:center
}
#center {
position: relative;
left:25%;
top:25%;
border: 1px solid #aaa;
width: 100px;height: 100px;
text-align:center
}
div { height: 50px;width: 50px;}
.blue { background-color: lightblue; position: absolute; }
.green {background-color: lightgreen; position: absolute; right:0}
.yellow {background-color: yellow; position: absolute; right:0; bottom:0 }
.red {background-color: lightpink; position: absolute; bottom:0;}
<div id="main">
<div class="blue">blue</div>
<div class="green">green</div>
<div class="yellow">yellow</div>
<div class="red">red</div>
<div id="center">
<div class="blue">center-blue</div>
<div class="green">center-green</div>
<div class="yellow">center-yellow</div>
<div class="red">center-red</div>
</div>
</div>
<p>This is relative absolute using css.</p>
Hy guys.
I have a situation of overlay div inside another div.
Why the main div not fit the height size when i using position relative in a inner div to create a overlay.
See the picture
I cannot use position: absolute because i need the scroll working inside the main div.
See the code:
div.main
{
width: 300px; height: auto;
border: solid 1px black; overflow: auto;
}
div.box1
{
width: 350px; height: 50px; border: solid 1px red;
}
div.box2
{
position: relative; top: -52px; left: 0px; z-index: 1;
width: 350px; height: 50px; border: solid 1px green;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2">box 2 - overlay</div>
</div>
</body>
</html>
I can use another css settings but i need to sinc the scroll of the inner divs.
If I understand your question correctly, this is what you need:
div.main
{
width: 300px; height: auto;
border: solid 1px black; overflow: auto;
position: relative;
}
div.box1
{
width: 350px; height: 50px; border: solid 1px red;
}
div.box2
{
position: absolute;
top: 0;
left: 0px;
z-index: 1;
width: 350px;
height: 100%;
background: rgba(0,0,0,0.5);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2"></div>
</div>
</body>
</html>
position: relative still keeps the original space free for its element - it only moves the element away from its original position by the top/bottom/left/right values. But the free space is still where it is without those settings. A wrapping container with aut height will act as if the relatively positioned element still were at its original position, causing what you brought up in your question.
So to force a solution as you seem to want it, you'll have to use a fixed height and overflow-y: hidden on your container element.
div.main {
width: 300px;
height: 52px;
border: solid 1px black;
overflow-y: hidden;
}
div.box1 {
width: 350px;
height: 50px;
border: solid 1px red;
}
div.box2 {
position: relative;
top: -52px;
z-index: 1;
width: 350px;
height: 50px;
border: solid 1px green;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2">box 2 - overlay</div>
</div>
</body>
</html>
In Chrome 60.0.3112.90(64-bit).
My system is macOS 10.12.4
As you can see, the blue box is overflow. How can I solve this problem? And why does it overflow?
Please check this JSFiddle
or this is my code.
.outer {
width: 200px;
height: 200px;
border-radius: 10px;
border: 1px solid black;
position: absolute;
overflow: hidden;
}
.inner {
width: 200px;
height: 200px;
position: relative;
overflow: scroll;
background-color: lightblue;
}
.inner2 {
width: 200px;
height: 400px;
background-color: lightgray;
}
.inner3 {
width: 200px;
height: 100px;
position: absolute;
background-color: blue;
}
<div class="outer">
<div class="inner">
<div class="inner2">
<div class="inner3"></div>
</div>
</div>
</div>
You can apply z-index: 1 to .outer CSS class.
You can also try this solution, it's used a lot by other guys.
You have here a working demo