This question already has answers here:
Why aren't my absolutely/fixed-positioned elements located where I expect?
(3 answers)
Closed 6 months ago.
please take a look to the snippet below.
I honestly can't get why the absolute positioned element (red) is not overlapping the other one. Why?
I all comes from analyzing a more complex case with some animations on a slideshow which I wanted to replicate. And they are take advantage of this strange (at least to me) behaviour, along with some other absolute-pos-in-flex-container related things.
Anyway, I tried to simplify the thing down to the bone and that's it.
Why isn't the description overlapping the caption?
.caption{
background-color: rgba(0, 0, 0, .2);
}
.description{
position: absolute;
background-color: rgba(250, 0, 0, .7);
}
<div class="caption">caption</div>
<div class="description">description</div>
The description element does not overlap the caption element because you have not set the top, bottom, left or right properties. Just setting position: absolute; by itself won't change the position of the element. You also need one of those additional properties to be set in order to tell the element where it will be absolutely positioned.
Try something like:
.caption{
background-color: rgba(0, 0, 0, .2);
}
.description{
position: absolute;
top: 8px;
background-color: rgba(250, 0, 0, .7);
}
<div class="caption">caption</div>
<div class="description">description</div>
To explicitly move absolutely positioned elements, it is necessary to set the CSS values of the top|bottom|left|right properties. By default, these properties have auto values - this is the key point in this situation.
According to the documentation, when top: auto:
for absolutely positioned elements, the position of the element is based on the bottom property, while height: auto is treated as a height based on the content; or if bottom is also auto, the element is positioned where it should vertically be positioned if it were a static element.
Similar with the rest of the properties (bottom, left, right).
Accordingly, when you set the positioning explicitly, then the elements will already overlap:
.caption {
background-color: rgba(0, 0, 0, .2);
}
.description {
position: absolute;
background-color: rgba(250, 0, 0, .7);
top: 0;
left: 0;
}
<div class="caption">caption</div>
<div class="description">description</div>
Related
This question already has answers here:
Why aren't my absolutely/fixed-positioned elements located where I expect?
(3 answers)
Is there any difference between 'margin-top, -left, -bottom, -right' and 'top, left, bottom, right' properties when element is positioned absolutely?
(2 answers)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 3 years ago.
I have a div child with absolute position (blue-box) and a parent with default (static) position hanging on body (container). When I define a margin-top for the parent, div child is displaced too.
Blue-box is positioned relative to its closest positioned ancestor, so in this case is positioned relative to body, because container is positioned statically. (See https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute)
I supposed that was a problem of margin collapsing, but I read that the margins of floating and absolutely positioned elements never collapse.
(See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)
body {
background-color: #1f1f1f;
height: 2000px;
}
.box {
width: 100px;
height: 100px;
margin-bottom: 10px;
}
.blue-box {
background: lightskyblue;
position: absolute;
margin-top: 110px;
}
.green-box {
background: lightgreen;
}
.container {
background: rgba(0, 0, 0, 0.4);
height: 200px;
width: 200px;
margin-top: 150px;
}
<div class="container">
<div class="box blue-box"></div>
</div>
<div class="box green-box"></div>
I expected blue-box to be on top of the viewport and not inside the container box
As the second sentence in the Mozilla docs say,
"The top, right, bottom, and left properties determine the final location of positioned elements.", you have to specify one of these values, to actually position it.
.blue-box{position: absolute;top:10px}
Check this codepen : https://codepen.io/jsuryahyd/pen/ExYGbxr
By the way, this got me thinking too. Thank you.
I have used CSS background on multiple divs to create a number of large format buttons. It looks beautiful, but the buttons are created dynamically, and there could be thousands of them. This means a HUGE dynamic CSS script... it there a better way of giving each element a different CSS background with the same properties?
here is the example code - HTML:
<div id="ab_a" class="banner_button">
<h2>Title A</h2>`
</div>
<div id="ab_b" class="banner_button">
<h2>Title B</h2>`
</div>
<div id="ab_c" class="banner_button">
<h2>Title C</h2>`
</div>
etc.... (there could be several thousand of these)
The CSS:
#ab_a {
background:
linear-gradient(
rgba(0, 0, 0, 0.0),
rgba(0, 0, 0, 0.6)
),
url(../images/bgimageA.jpg);
background-size: cover;
width: 100%;
padding-bottom:37.01%;
position: relative;
float: left;
}
#ab_b {
background:
linear-gradient(
rgba(0, 0, 0, 0.0),
rgba(0, 0, 0, 0.6)
),
url(../images/bgimageB.jpg);
background-size: cover;
width: 100%;
padding-bottom:37.01%;
position: relative;
float: left;
}
#ab_c {
background:
linear-gradient(
rgba(0, 0, 0, 0.0),
rgba(0, 0, 0, 0.6)
),
url(../images/bgimageC.jpg);
background-size: cover;
width: 100%;
padding-bottom:37.01%;
position: relative;
float: left;
}
...I don't want to have to repeat this block of code 1000's of times in a dynamic CSS file.
How can I separate the background url (the only bit which changes) from the rest of the code?
BTW - Putting just the background url inline within the script will not work, it will ignore all the CSS properties in the stylesheet.
Thanks in advance.
Using multiple background images on a single element, unfortunately, there's no way using pure CSS to set the second background image in a separate rule without repeating all the previous background layers.
jQuery to the rescue.
jsFiddle demo in action
Inside your CSS set the second background to none:
.banner_button{
background: linear-gradient(
rgba(0, 0, 0, 0.0),
rgba(0, 0, 0, 0.6)
), none 50% / cover; /* notice the `none` for the second layer */
width: 100%;
padding-bottom: 37.01%;
position: relative;
float: left;
}
while creating your elements, make sure to generate them passing the desired image URL from whatever data you use, >> inside a data-* attribute of your generated element:
<div class="banner_button" data-bg="../images/whatever.jpg"></div>
Than using jQuery, replace that none value with the value holded by the data-bg attribute:
$(".banner_button").css("backgroundImage", function(i, v){
return v.replace("none", "url("+ $(this).data("bg") +")" );
});
That's it.
jQuery will rebuild the whole background layers for you!
I am creating a site for my hometown in Wordpress. Because I want that the user sees the whole background image, I modified the main div's transparency property. So far so good. However, I also want to have a Google Maps box on the website. Since it is also part of the main div, the Google Maps box is also transparent (which makes it really hard to see what's going on). I wonder if there is a way to add an exception to the main div's transparency just for the Google Maps box.
Any ideas would be much appreciated.
This is the CSS3 code I use. cbox is the main div that needs to be 0.80 transparent. gmapsframe is the box for the Google Maps.
.cbox {
overflow: hidden;
width: 958px;
margin: 0 auto;
padding: 20px 0 0 0;
background: url("images/cbox.png") center 1px no-repeat;
background-color: rgba(0, 0, 0, 0.8);
}
.gmapsframe {
background-color: rgba(0, 0, 0, 1);
}
It doesn't seem to work at all.
There are 2 ways you can do this,
Option 1 is to override the parent transparency. Apply this to your maps div
<div id='transparentDiv' style='background-color: rgba(0, 0, 0, 0.4);'>
<div id=mapDiv style='background-color: rgba(0, 0, 0, 1);'></div>
</div>
Here is a JS Fiddle example: http://jsfiddle.net/V9Y5f/
Option 2 is to use absolute or relative positioning:
<div id='containerDiv'>
<div id='transparentDiv' style='background-color: rgba(0, 0, 0, 0.4);'>
</div>
<div id='mapDiv' style='position: relative; top: -30px;'></div>
</div>
Here is a JS Fiddle example using relative positioning: http://jsfiddle.net/p7TXU/
Instead of using the opacity property of CSS, use rgba on the parent, as it handles opacity, and does not affect any children.
Ps.: You don't need to change anything regarding transparency on any children of that div.
More info regarding rgba.
I am working on a design with twitter bootstrap 2 (responsive). In this design, I have a header, left sidebar, content and footer.
Basically, I have the following code structure - have a look at http://jsfiddle.net/w4yh9/3/
The important section is the:
<div id="inner" class="span10">
...
</div>
Please have a look at the attached screenshot, especially the yellow marked area:
I have the following question / problem:
How can I add some padding to the right for all content elements (success message, content, table) - it should work on smaller screens as well?
I would give the parent container a padding and also apply box-sizing: border-box to it.
Check out my JSFiddle: http://jsfiddle.net/w4yh9/4/
#main {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
background: #FFF;
border-radius: 4px;
}
.span10 {
padding-right: 10px;
box-sizing: border-box;
}
You could try using
#main {padding-right:5px}
But maybe that makes #main wider than you'd like.
In that case, you could use
#main > div { width:98%; }
#main > .navbar {width:100%; }
to set all children divs of main to 98% width, and then over-ride this for the (hopefully limited number of) specific children that you want to be full-width.
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 1 year ago.
It seems that with markup like http://jsfiddle.net/nwekR/
<div id="container">
Outer Div
<div id="inner">Inner Div</div>
</div>
and CSS like
#container {
position: relative;
z-index: 6;
}
#inner {
position: absolute;
z-index: 4;
}
#inner is still above #container can I have #inner below?
No.
The CSS 2.1 spec states this standard of painting elements:
the background and borders of the
element forming the stacking
context.
the child stacking contexts with
negative stack levels (most negative
first).
the in-flow, non-inline-level,
non-positioned descendants.
the floating descendants.
the in-flow, inline-level,
non-positioned descendants,
including inline tables and inline
blocks.
the child stacking contexts with
stack level 0, and the positioned
descendants with 'z-index: auto'.
the child stacking contexts with
positive stack levels (least
positive first).
Given these rules and your HTML, #container is creating the stacking context for the element #inner, which means #container has to be rendered first.
Other people have already posted alternative HTML/CSS to get the effect you desired, but if you want to know more about why what you want isn't possible, here is the documentation:
http://www.w3.org/TR/CSS21/visuren.html#layers
You just need to put it outside of inner element when it comes to HTML.
Here's your solution: http://jsfiddle.net/nwekR/23/
<div id="container">
Outer Div
</div>
<div id="inner">Inner Div</div>
#container {
background: yellow;
position: relative;
height: 100px;
-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.6);
box-shadow: 0 2px 6px rgba(0,0,0,0.6);
z-index: 6;
}
#inner {
background: orange;
position: absolute;
z-index: 4;
width: 100px;
height: 50px;
top: 180px;
right: 0;
padding-top: 20px;
}
The cleanest solution is to add an extra wrapper element, and to move #inner outside #container.
The extra wrapper element is given position: relative, so everything else should be the same as it was before, with the exception that #inner is underneath #container.
Live Demo
It is not possible(in it's current state of having inner a child of container) because when the browser renders the DOM, it goes from top down on the DOM tree, and there is no way to draw under something that has already been drawn(i.e. drawing the parent before child).
You can read more about the z-index here.
There are ways of accomplishing(by changing the html around) this however, you can see thirtydot's solution.