I have a absolute positioned div inside a container div. The background color of the absolute positioned div does not fill the container div. The height of the container div is dynamic according to the content. How to make the background color of the positioned div to fill it's container div?
Html:
<div class="container">
test<br />
test<br />
test<br />
<div class="showbg">
test
</div>
</div>
css:
.container{ background-color:#CCCCCC; width:300px;}
.showbg{ background-color:#FFFFFF; position:absolute; width:300px; margin-top:-65px; opacity:0.4;
filter:alpha(opacity=40);}
.container {position: relative;}
.showbg {position:absolute; top:0;bottom:0;left:0;right:0;}
Write:
.container{position:relative;}
.showbg{height:100%;}
DEMO here.
Edit style for absolute div for following
.showbg
{
top:0;
bottom:0
}
for the absolute div with other style.
Check it on http://jsfiddle.net/pvr2Y/
.container {
background-color:#CCCCCC;
width:300px;
position:relative;
}
.showbg {
background-color:#FFFFFF;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0.4;
filter:alpha(opacity=40);
}
Related
I've created the following to illustrate my question.
#container{
background-color:white;
position:relative;
}
#absolute{
position:absolute;
height:100%;
width:100%;
background-color:black;
}
#relative{
position:relative;
background-color:blue;
width:200px;
}
#content{
background-color:green;
height:50px;
width:50px;
}
<div id="container">
<div id="absolute"></div>
<div id="relative">
<div id="content"></div>
</div>
</div>
So I understand the following:
1) The content div is sized to 50px, so the containing divs (relative) also has a 50px height. All the way up to the container which is why the bar is a uniform 50px all across the screen.
2) If I remove the relative tag from the container, then the absolute div contents fill the screen, although the relative div is positioned in front still. This is because the absolute positioned element is now tied to the HTML element rather than the container and so is not restricted by the height of the container.
What I don't understand is:
1) If I remove the relative tag from the relative element, it disappears behind the absolute element. Even if I set a higher z-index on the relative element it does not show through.
#container{
position:relative;
}
#absolute{
position:absolute;
height:90%;
width:100%;
background-color:black;
z-index:1;
}
#relative{
//position:relative;
background-color:blue;
width:200px;
z-index:2;
color:white;
}
#content{
background-color:green;
height:50px;
width:50px;
}
<div id="container">
<div id="absolute"></div>
<div id="relative">
<div id="content">Test</div>
</div>
</div>
2) The absolute element is 50px high with no content due to the 100%, but if I give it content, it remains at 50px even when the content would overflow.
#container{
background-color:white;
position:relative;
}
#absolute{
position:absolute;
height:100%;
width:100%;
background-color:black;
color:white;
z-index:2;
}
#relative{
position:relative;
background-color:blue;
width:200px;
}
#content{
background-color:green;
height:50px;
width:50px;
}
<div id="container">
<div id="absolute">
Test<br/>Test<br/>Test<br/>Test
</div>
<div id="relative">
<div id="content"></div>
</div>
</div>
Can anyone please explain what the rule is that allows these elements to behave in this way. Many thanks.
To answer the first question :
If I remove the relative tag from the relative element, it disappears behind the absolute element. Even if I set a higher z-index on the relative element it does not show through.
It's because default position is position:static and that means ingnoring all positioning instructions including z-index,
in this case if you set #absolute with z-index negative value it will go on a lower layer:
#container{
position:relative;
}
#absolute{
position:absolute;
height:90%;
width:100%;
background-color:black;
z-index:-11;
}
#relative{
//position:relative;
background-color:blue;
width:200px;
z-index:2;
color:white;
}
#content{
background-color:green;
height:50px;
width:50px;
}
<div id="container">
<div id="absolute"></div>
<div id="relative">
<div id="content">Test</div>
</div>
</div>
as to question 2:
with height:100% it expands to height of parent;
This is intended to be an image preview along with text.
I have two divs: one with an image and one with text. The image needs to be square size and fill the whole container
The code currently is
<div class="row">
<div class="col-md-3">
<div class="col-md-6">
<img src="http://quarknet.de/fotos/blumen/wildblumen/graeser-im-quadrat.jpg" alt="" style="max-height:100%;max-width:100%">
</div>
<div class="col-md-6">
<div class="top">Top</div>
<div class="bottom">bottom</div>
</div>
</div>
http://jsfiddle.net/m1sbhnwe/
And it is intended for full-screen, so you need to drag the preview wider to see the effect.
Now I need the div with the top class to always stay at the top of that div and the div with the bottom class to always stay at the bottom of the parent div at image level. That means the bottom div should align with the lower edge of the picture.
If I add position:absolute;bottom:0 to that div it just goes to the top. How can I achive the effect I want?
I don't quiet understand the effect your going for.
If the text is appearing at the top it ussually points to the parent div having a height of 0px;
if you are floating .col-md-6 then that could cause a problem calculating height. In which case you would want to add a after the last .col-md-6
if you are using a absolute positioned .col-md-6 then the size cannot be calculated and you will have to come up with a fixed width/height;
Here is a solution kinda that would work if the .row is full screen...
.row {
position:fixed; top:0px; left:0px; right:0px; bottom:0px;
}
.col-md-6 {
position:absolute; top:0px; left:0px; right:0px; bottom:0px;
text-align:center;
}
.col-md-6 img {
height:100%;
}
.col-md-6 .top {
position:absolute; top:0px; left:0px; right:0px;
}
.col-md-6 .bottom {
position:absolute; bottom:0px; left:0px; right:0px;
}
the fiddle you provided has no css in it, It would help if you added some CSS to show the problem you are having.
UPDATED FOR COMMENT;
.col-md-6 {
float:left; height:100%; position:relative;
}
.col-md-6 img {
height:100%;
}
.col-md-6 .top {
position:absolute; top:0px; left:0px;
}
.col-md-6 .bottom {
position:absolute; bottom:0px; left:0px;
}
How to display a div as overlay which is hovered by a div which is inside another div.
This is the sample code which I tried to display the div as overlay box
CSS
/*This is container Div */
#one{
position:absolute;
background-color:#999;
width:200px;
height:200px;
z-index:1;
}
/*This is Hovering Div which is inside container Div:*/
#oneone
{
position:absolute;
background-color:#fff;
width:50px;
height:50px;
left:100px;
top:90px;
z-index:5;
}
/*This is the Overlay Div*/
#two{
position:absolute;
background-color:#000;
width:200px;
height:200px;
left:200px;
top:290px;
z-index:20;
display:none;
}
/*This is the Div displays after Hovering*/
#oneone:hover #two{
display:block;
}
HTML
<div id="one">
<div id="oneone"></div>
</div>
<div id="two">
</div>
Pls help.. thanks in advance.
The Jfiddle : http://jsfiddle.net/stylerkishore/DySxJ/
i created a jsfiddle for you
i modified a bit the html, so that #oneone and #two to be at least siblings in the same container
<div id="one">
<div id="oneone"></div>
<div id="two"></div>
</div>
also i changed the css selector
#oneone:hover + #two {
display:block;
}
Try following code -
<div id="one">
<div id="oneone" onmouseover="javascript:var mydiv = document.createElement('two'); "><div id="two"></div>
</div>
You will need to edit #two in css to show it's proper position
JSFIDDLE
I am trying to add two images (ul,li) at the end of a DIV. I use position ABSOLUTE, RELATIVE and left:0, bottom:0, and it does it, but it doesnt remain on the div.
The images appear in the "MainDiv", and not in "container".
The css:
#MainDiv{
background:url(../img/background.jpg) no-repeat;
background-size:cover;
width:100%;
height:600px;
}
#container{
width:980px;
height:600px;
margin:0 auto;
position:relative;
}
#list{
width:260px;
height:40px;
position:absolute;
left:0;
bottom:0;
}
#list li{
width:130px;
height:40px;
border:1px solid white;
}
The Html:
<div id="MainDiv">
<div id="container">
<ul id="list">
<li id="image1">Example1</li>
<li id="image2">Example2</li>
</ul>
</div>
</div>
The absolutely positioned element is positioned with respect to the corresponding edges of it's parent... from the look of it your container doesn't have any height set...
When you add a height to container it does move your <ul> to the bottom of the div. In fact, it is always at the bottom of the div, but because the height of the div is 0 it doesn't look like it is at the bottom of it.
http://jsfiddle.net/s5aE3/
#container{
width:980px;
margin:0 auto;
position:relative;
height: 800px;
}
The list is correctly positioned at the bottom of the container div, but there is nothing that gives the container div any height. As the height of the container div becomes zero, the list is placed with the bottom where the container div is.
To put the list inside the container div, you need to give the container div a height. Either by specifying a height style, or putting something inside it that isn't absolutely positioned or floating.
Edit:
With your updated code that has a height for the container div, the list is placed at the bottom.
Try setting the vertical align to bottom.
<style>
#MainDiv{
background:url(../img/background.jpg) no-repeat;
background-size:cover;
}
#container{
width:980px;
margin:0 auto;
position:relative;
}
#list{
width:260px;
height:40px;
position:absolute;
left:0;
bottom:0;
}
#list li{
width:130px;
height:40px;
border:1px solid white;
vertical-align:bottom;
}
</style>
<body>
<div id="MainDiv">
<div id="container">
<ul id="list">
<li id="image1>Example1</li>
<li id="image2>Example2</li>
</ul>
</div>
</div>
I simply want a div that is absolutely positioned to sit at its current offset top positioning, but im realizing that if any element above it in the DOM is floated (even if that element is inside an element that isnt floated) it will snap to the top of the relative parent. as soon as I remove the above floats the absolutley positioned div snaps to the top. any help is greatly appreciated. here is a fiddle http://jsfiddle.net/hPA3M/2/
Here is my Html:
<div class="parent">
<div class="child1">
<div class="baby1">
<p>Baby</p>
</div>
<div class="baby1">
<p>Baby</p>
</div>
<div class="baby1">
<p>Baby</p>
</div>
</div>
<div class="child2">
</div>
</div>
Here is my css:
.parent {
position:relative;
height:800px;
width:400px;
background:#ff0000;
padding:20px;
}
.child1 {
width:100%;
background-color:#00ff00;
margin-bottom:10px;
}
.baby1 {
background:#e1e1e1;
/*
toggling float on and off has very different effects
*/
float:left;
width:30%;
}
.child2 {
position:absolute;
width:100%;
height:100px;
background-color:#0000ff;
}
Add overflow: hidden for .child1 selector:
.child1 {
width:100%;
background-color:#00ff00;
margin-bottom:10px;
}
Demo
DEMO
When dealing with floating elements is useful to have a clear:both below them.
In this case i addedd <div class="clear"></div> below child1.
CSS for .clear is
.clear {
clear:both;
}