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>
Related
I need a div to float within another div. Tried using position: fixed, but the div floats beyond the parent div now.
Here is the sample code.
I need the "Div to Float" to float inside "Div 1". now it floats outside 'Div 1' and go behind 'Div 2'
Here is the code.
.wrapper {<!--from www .j av a2s.c o m-->
width:100%;
height: 200px;
overflow-y: scroll;
}
.container {
width: 301px;
margin: 0px auto;
height: 1501px;
background: green;
position: relative;
}
.element {
background:yellow;
position:fixed;
width:101px;
height:71px;
top:51px;
right:0px;
left:769px;
border:2px solid blue;
}
<div class="wrapper">
<div class="container">
Div 1
<div class="element">Div to float</div>
</div>
</div>
<div class="container" style="margin-top: 30px; background: purple">Div 2</div>
What I've tried?
.wrapper {<!--from www .j av a2s.c o m-->
width:100%;
height: 200px;
overflow-y: scroll;
}
.container {
width: 301px;
margin: 0px auto;
height: 1501px;
background: green;
position: relative;
}
.element {
background:yellow;
position:fixed;
width:101px;
height:71px;
top:51px;
right:0px;
left:769px;
border:2px solid blue;
}
<div class="wrapper">
<div class="container">
Div 1
<div class="element">Div to float</div>
</div>
</div>
<div class="container" style="margin-top: 30px; background: purple">Div 2</div>
What I've expected?
I need the "Div to Float" to float inside "Div 1".
What is the result now?
Now it floats outside 'Div 1' and go behind 'Div 2'
.container {
position:relative;
}
.element{
position:absolute;
}
I don't fully understand what you mean by "float", but this code will place your div.element inside div.container
Position: Fixed
position: fixed; is positioning the element relative to the viewport, which means it always stays in the same place even if the page is scrolled.
Position: Sticky
position: sticky; is positioning the element relative until a given offset position is met in the viewport - then it "sticks" in place. When the user scrolls past the parent div, the element will stay with its parent.
Read more about Layout positioning
.wrapper {
width: 100%;
height: 200px;
overflow-y: scroll;
position: relative;
}
.container {
width: 301px;
margin: 0px auto;
height: 1501px;
background: green;
position: relative;
z-index: 2;
}
.second {
z-index: 0;
}
.element {
background: yellow;
position: sticky;
width: 90%;
height: 80px;
top: 50px;
right: 0px;
left: 769px;
border: 2px solid blue;
}
.fixed {
position: fixed;
top: 50px;
left: 0;
width: 50%;
z-index: 1;
}
<div class="wrapper">
<div class="container">
Div 1
<div class="element">I am 50px away from the top of my green parent, and I will stop being sticky when document gets scrolled away from my parent.</div>
</div>
<div class="fixed" style="margin-top: 30px; background: red">I am just gonna stay in this place forever cause I'm fixed. Using z-index on me or the elements will control whether I'm above or below any other elements.</div>
</div>
<div class="container second" style="margin-top: 30px; background: purple">Div 2</div>
The html code is as follow:
<div class="first common">
i am the first div.
<div class="second common">
i am the second div.
<div class="third common">
i am the third div.
</div>
</div>
</div>
css:
.common {
position: absolute;
left: 50px;
top: 50px;
width: 200px;
height: 200px;
color: #fff;
}
.first {
background-color: #8EE5EE;
}
.second {
background-color: #7A67EE;
}
.third {
background-color: #0000AA;
}
The results are as follows
And now I want to put the first div in the front, the second div in the middle and the third div at the back (reverse) by using z-index if I could .
But I don't know how to do.
With that html you cannot. A div that is a child of another div won't show behind it regardless of z-index. Restructure like this:
.outer {
position: relative;
}
.common {
position: absolute;
width: 200px;
height: 200px;
color: #fff;
}
.first {
background-color: #8EE5EE;
left: 50px;
top: 50px;
z-index: 3;
}
.second {
background-color: #7A67EE;
left: 100px;
top: 100px;
z-index: 2;
}
.third {
background-color: #0000AA;
left: 150px;
top: 150px;
z-index: 1;
}
<div class="outer">
<div class="first common"></div>
<div class="second common"></div>
<div class="third common"></div>
</div>
<div class="common">
<div class="first">i am the first div.</div>
<div class="second">i am the second div.</div>
<div class="third">i am the third div.</div>
</div>
.common {
position: relative;
color: #fff;
}
.first {
position: absolute;
background-color: #8EE5EE;
z-index:1;
left:50px;
top:50px;
width:200px;
height:200px;
}
.second {
background-color: #7A67EE;
position: absolute;
z-index:2;
width:200px;
height:200px;
left:100px;
top:100px;
}
.third {
background-color: #0000AA;
position: absolute;
z-index:3;
left:150px;
top:150px;
width:200px;
height:200px;
}
Try this.
I wrapped it in wrapper class. and reverse the left and top position of common class. no need to use z-index.
.wrapper {
position: absolute;
left: 200px;
top: 200px;
}
.common {
position: absolute;
left: -50px;
top: -50px;
width: 200px;
height: 200px;
color: #fff;
}
.first {
background-color: #0000AA;
}
.second {
background-color: #7A67EE;
}
.third {
background-color: #8EE5EE;
}
<div class="wrapper">
<div class="first common">
<div class="second common">
<div class="third common">
</div>
</div>
</div>
</div>
Say I have the following HTML:
.wrapper {
position: relative;
z-index: 99;
}
.red, .green {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
.red {
background: red;
z-index: 400;
}
.green {
background: green;
}
<div class="wrapper">
<div class="red"></div>
</div>
<br>
<div class="wrapper">
<div class="green"></div>
</div>
I would like the red box to appear on top of the green box. But it doesn't. The .wrapper has z-index of only 99 whereas .red has z-index: 100. Are there any hacks top produce .red on top?
Thanks in advance!
You don't want to give the wrapper thats containing both of those divs a z-index because it's containing both of those divs. Get rid of the z-index on the .wrapper. and leave the .red class a z-index of 400 and the red box will appear on top of the green one:
.wrapper {
position: relative;
}
.red, .green {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
.red {
background: red;
z-index: 400;
}
.green {
background: green;
}
<div class="wrapper">
<div class="red"></div>
</div>
<br>
<div class="wrapper">
<div class="green"></div>
</div>
You're setting both containers to z-index: 99. Therefore, since the z-index is the same for both, source order decides placement on the z-axis.
The .wrapper element with the green div comes last in your code, so it prevails. (Switch the order of the .wrapper elements, and the red wins out.)
The z-index: 400 on the red child is having no effect since the stacking order that matters is that of the containers.
Try this:
.wrapper:first-child {
position: relative;
z-index: 2;
}
.wrapper:last-child {
position: relative;
z-index: 1;
}
.red, .green {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
.red {
background: red;
}
.green {
background: green;
}
<div class="wrapper">
<div class="red"></div>
</div>
<br>
<div class="wrapper">
<div class="green"></div>
</div>
I have 3 elements, #app, #main-section that is inside #app, and #magazine-detail that is inside #main-section.
How can I position #magazine-detail inside of #magazine-section when the #app is set to position: relative; and #magazine-detail is set to position: absolute;?
This is the css:
#app {
position: relative;
height: 100%;
width: 100%;
}
#main-section {
position: absolute;
top: 77px;
left: 0;
width: 100%;
}
Entire html is too big so I am posting just a short version, hope you will get the picture:
<div id="app">
...
<div id="main-section">
...
<div id="main-section">
...
</div>
</div>
</div>
I need to position #magazine-detail 30px from the bottom of the main section.
I have tried to position it with position: absolute like it is suggested to do,like this:
#magazine-detail {
position: absolute;
bottom: 30px;
}
But then the element was position somehow 30px from the top and not bottom?
I guess following is yout html
<div id="app">
<div id="main-section">
<div id="magazine-detail"></div>
</div>
</div>
Your #app is relative and main-section is absolute with respect to app. The thing is that in css if you set magazine-detail absolute too, it will be positioned with respect to main-section.
Below is a working sample:
#app {
position: relative;
height: 400px;
width: 200px;
padding: 5px;
border: 2px solid red;
}
#main-section {
position: absolute;
height: 80%;
width: 80%;
padding: 5px;
border: 1px solid black;
top: 15px;
left: 15px
}
#magazine-detail {
position: absolute;
width: 50%;
height: 50%;
border: 1px dotted green;
bottom: 30px;
}
<div id="app">
<div id="main-section">
<div id="magazine-detail"></div>
</div>
</div>
Try this :
#app {
position: relative;
height: 100%;
width: 100%;
border:1px solid #eee;
}
#main-section {
position: absolute;
top: 77px;
left: 0;
width: 100%;
height:400px;
border:1px solid #ccc;
}
#magazine-detail {
position: absolute;
border:1px solid #ff0000;
width:400px;
bottom:30px;
}
HTML :
<div id="app">
<div id="main-section">
<div id="magazine-detail">
This is the test<br>
This is the test<br>
This is the test<br>
This is the test<br>
This is the test
</div>
</div>
</div>
The position absolute position's the elements as per the parent container's position, so in order to make your #main-section and #magazine-detail position absolute, the #app should be positioned relative.
How to make the green div wrap around the blue and yellow divs (his children)
in this particular problem:
https://jsfiddle.net/y74ueuLa/
HTML
<div id="main">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="footer"></div>
CSS
#main {
width: 100%;
background-color: green;
z-index: -2;
position: relative;
margin-bottom: 10px;
}
#one {
width: 100%;
height: 150px;
background-color: blue;
position: absolute;
z-index:-1;
}
#two {
position: relative;
top: 100px;
z-index:3;
width: 300px;
height: 500px;
background-color: yellow;
margin: 0px auto;
}
The green div is wrapped around the blue div. It just doesn't appear that way because the blue div is on top.
With div #two you're positioning it relatively with top 100px. When you position something relative, you're moving the visual component of the div relative to where it would naturally fall in the browser. It's equivalent to saying "visually move down 150px from where you are". You could just make the green div taller, but I don't think that's what you're going for.
I think what you're trying to do (and please correct me if I'm wrong), is this:
https://jsfiddle.net/dk6L1zLL/
#main {
width: 100%;
background-color: green;
z-index: -2;
position: relative;
margin-bottom: 10px;
padding-top:10px;
padding-bottom:10px;
}
#one {
//width: 100%;
height: 150px;
background-color: blue;
//position: absolute;
z-index:-1;
margin:0 10px 0;
}
#two {
//position: relative;
//top: 100px;
z-index:3;
width: 300px;
height: 500px;
background-color: yellow;
margin: 0px auto;
/*margin-bottom: 500px;*/
}
#footer {
height: 100px;
background-color: red;
width: 100%;
position: relative;
z-index: -3;
}
<body>
<div id="main">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="footer"></div>
</body>
I got rid of a lot of the positioning rules and added some margin and padding.