I want to have a inside of another that will serve as a background to the container and sit behind all of the other elements inside of the container. The HTML would be something like so:
<div id='container'>
<div>Blah</div>
<input type='text'/>
<input type='submit'/>
<div id='background'>
<img.../>
Some Text Maybe?
</div>
</div>
My failed CSS:
#background{
float:left;
z-index:-999;
background-color:black;
height:'+o.height+'px;
width:'+o.width+'px;
}
The 0.variables are from a jQuery plugin I'm making this for - basically the div should be the same height and width that the parent is.
Where I currently stand: My background sits below the sibling elements (along the y-axis not the z). When I play around with the position property, it either places the element behind the parent or it has no effect.
What I ultimately am trying to do is create a jQuery plugin that adds an animated background to a specified element. I'm not even sure if what I'm trying to do with the CSS is possible.
Try putting the background as the container's first child, then using position: absolute;. Mess around with the z-index until it works.
Also, you may need to specify a "more negative" z-index on the <body>, otherwise your background element will end up behind the body (and thus invisible).
Related
When I position:absolute my first div relative to body, the follow up div-element content to hide under the first div, from what I know the follow up div(block element) has to come on the next line. and when posititon:absolute my 2nd element too , It covers my first element. Can someone explain me what exactly happens for second element if I position:absolute my first element.
<div class="first"></div>
<div class="second">
<div class="d"></div>
<div class="e"></div>
</div>
Since your first div is position absolute it is brought outside the natural hierarchy of elements. You can now freely choose a position for it. Your second div is now pushed up and is therefore at the same position as the first div was before setting it to absolute.
Divs are by default display: block; so they go underneath each other.
You can add z-index: 5; (or whatever number) to the second div in order to bring it to the front. And if that's not working add a lower z-index to the absolute positioned element. Keep in mind in order to use z-index you always need to specify the position:
What do you actually want to accomplish? I can improve my answer then.
It's known that unless an element with position:absolute isn't inside another positioned element, it will be out of flow. Therefore span doesn't have blue background.
<body>
<div class = "main" style="background-color: blue;" />
<span style="position:absolute"> Some content right here</span>
</div>
</body>
However if we put position:relative to .main's style, span should have blue background. So why doesn't it?
Background color isn't inherited (although it can be made to) regardless of positioning so it's not clear what you are asking.
However, in this instance, because you have positioned the child div absolutely the parent collapses (as the child is now out of the flow) to no height and so shows no background.
If you give the div some height, the background will appear. This, however, will not affect the background of the span, which defaults to transparent.
This is the page: http://aszx.altervista.org/aatest/
As you can see from the source code, the #news, #news-1 and #news-2 have this rule:
background: #F2F2F2;
Could you tell me why the background doesn't change and it's still white ?
I have noticed that the background change when I resize the browser's window.
It's because the floats are causing the div to not be of any height. You need to add a clearfix class to the elements you're trying to set the background to.
<div class="col-md-10 center-block clearfix" id="news">
This will cause the #news div to clear itself, thus making its height encompass the contained div elements. Do the same for your other containing elements as well.
I'm writing down a website using HTML and CSS3 and I have encountered some problems putting div's into each other and using the absolute position. When I add the position:absolute, I can set the div's background color and manipulate the objects within it, but it's been removed from the DOM, which creates some other difficulties for me (like not knowing how to set a footer). My question is how to make so, that all the elements inside my #content div are aligned properly, the height is set automatically and the background-color is the same for all of them?
UPDATE:
fiddle
add a div with clear class upper than footer and style clear: both;
...
<div class="clear"></div>
<div id="footer">
</div>
...
jsFiddle Demo
Background
I have the following html code:
<div id="parent">
<div id="child">
I'm the child!
</div>
</div>
I want the parent div to be positioned relative to the bottom of the page as with the css properties position: absolute, bottom: 0px.
This works fine if the child div(s) have no padding or border. However, as showcased in this JSFiddle example, if the child has padding or a border, it expands beyond the bottom of the parent div (notice the rendered page is scrollable and there is additional content from the child div below the bottom of the page).
Question
What's the best way to make sure the parent div fully encompasses the child div vertically? (Correct me if I'm wrong, but this doesn't appear to be a problem with horizontal padding/borders)
My best idea was to add the sum of the padding/border/margin of to the padding to the parent div. Using something like SASS to generate the actual css makes this slightly more palatable, but still seems like a really unclean solution. Is there a better way?
Thanks!
(As a side note, when I made the JSFiddle example I noticed the right border was missing on the child div. Is this just a fluke with JSFiddle or something?)
If you get rid of those display: inline;s it will work like a charm.