I'd like to align a child div inside a parent div (header-image as background image) centered vertical and horizontally to the bottom.
<div id="header-image">
<div class="row">
... Content
</div>
</div>
I found a solution for horizontal centering:
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%;">
... content
</div>
</div>
But no idea how to get the content to the bottom (works only with position:absolute)
For better understanding on http://webstopp.de/ you can see a header-image and some text in it but the text has to be on bottom of the header-image div.
#header-image {
background: url("http://placehold.it/200x200&text=[banner img]") no-repeat;
height: 200px;
width: 200px;
position: relative;
left: 0;
bottom:0;
}
.row {
position: absolute;
left: 50%;
bottom:0;
}
.inner {
position: relative;
left: -50%
}
Fiddle
Try this for your child div: margin-top: 99%;
Related
I have a div that is positioned absolutely in CSS. That div has overflow:auto so sometimes it shows a scrollbar if it has a lot of content. I need to completely overlay that div with another div, this one semitransparent so as to completely cover the first div.
The problem is that when a scrollbar is shown in the outer div, the overlay div does not cover it.
My HTML
<div id="outer">
<div id="content">
1<br/>2<br/>3<br/>4<br/>5<br/>
6<br/>7<br/>8<br/>9<br/>10<br/>
11<br/>12<br/>13<br/>14<br/>15<br/>
</div>
<div id="overlay">
</div>
</div>
My CSS
div#outer {
overflow: auto;
position: absolute;
top: 60px;
left: 20px;
height: 200px;
width: 200px;
border: 3px solid blue;
}
div#content {
background-color: lightgray;
}
div#overlay {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: yellow;
opacity: 0.8;
z-index: 2;
}
Run this here:
http://jsfiddle.net/pTnXF/4/
Any ideas?
Placing the #overlay inside #content and adding a "position:relative" to #content could work.
http://jsfiddle.net/pTnXF/5/
HTML changes
<div id="outer">
<div id="content">
1<br/>2<br/>3<br/>4<br/>5<br/>
6<br/>7<br/>8<br/>9<br/>10<br/>
11<br/>12<br/>13<br/>14<br/>15<br/>
<div id="overlay">
</div>
</div>
</div>
CSS changes
div#content {
background-color: lightgray;
position: relative;
}
jquery
$("#overlay").css("height",($('#outer')[0].scrollHeight));
I have a figure with a percentage-based with. Within that box, I have an image with a transparent background. I need to center it horizontally, and pin it to the bottom of the container, while allowing the top to break out of the container (see image).
I can use absolute positioning to pin it to the bottom and break out of the top, but I can't get it centered. Is there a way to do it when I won't know the width of the image and the width of the container is flexible? Is display:table a possibility?
My Code:
<figure class="feature">
<a href="#">
<img src="image" />
<p class="title-bar">Caption</p>
</a>
</figure>
.figure { position: relative; width: 50%; }
.figure img { position: absolute; bottom: 0; }
Please, check this fiddle, there is 2 variants to center an image
http://jsfiddle.net/GSKFD/
Markup is the same
<figure>
<a href="">
<img src="http://placekitten.com/200/300" alt="" />
</a>
</figure>
General style for both methods
img{
vertical-align: bottom;
}
First variant
figure{
position: relative;
width: 50%;
height: 300px;
background: #cad;
}
figure a{
position: absolute;
bottom: 0;
left: 50%;
}
figure img{
position: relative;
left: -50%;
}
And the second one
figure{
position: relative;
width: 50%;
height: 300px;
background: #cad;
}
figure a{
position: absolute;
width: 100%;
left: 0;
bottom: 0;
text-align: center;
}
You can do this with pure CSS, but you need two additional divs to hold and position the elements.
Here's the CSS:
.featureHolder {
position: relative;
/* height can be anything */
height: 200px;
}
.feature {
margin: 0;
overflow: visible;
/* width can be anything */
width: 60%;
height: 100px;
background: #cccccc;
position: absolute;
bottom: 0;
}
.imageHolder {
text-align: center;
width: 100%;
position: absolute;
bottom: 0;
}
img {
margin-bottom: -5px;
}
Here's the HTML:
<div class="featureHolder">
<figure class="feature">
<div class="imageHolder">
<a href="#">
<img src="img" />
</a>
</div>
Caption
</figure>
</div>
Caption also can be positioned within the same a tag as the image, but in this example it's separated out so I didn't have to mess with it.
Here's a demo in JSFiddle - give .feature any width and img should still center. (BTW your CSS isn't right - it should be either 'figure' or '.feature', but can't be '.figure' as figure is an element with class name 'feature'.)
Basically you need to do a left: 50% then margin-left: -whatever the width of the image is. This will position it center in your relative div. My example assumes you do not know the width of the image.
http://jsfiddle.net/rVRT4/2/
http://jsfiddle.net/rVRT4/2/embedded/result/
$(document).ready(function(){
var width = $(".figure img").width();
$(".figure img").css("margin-left", -(width/2));
});
.figure { position: relative; width: 50%; height: 500px;}
.figure img { position: absolute; bottom: 0; left:50%;}
<div class="figure">
<a href="#">
<img src="http://i.stack.imgur.com/4TtEY.jpg" />
<p class="title-bar">Caption</p>
</a>
</div>
The best way to explain this is via example:
http://jsfiddle.net/e7JjU/
I have a pretty good understanding of z-indexes and the stacking context but I cannot figure out a logical reason div1 (blue) is able to appear between the stacks of red and green. Can someone please explain this?
#div1{
width: 200px;
height: 50px;
background-color: blue;
position: relative;
top: 20px;
left: 15px;
z-index: 1;
}
#div2 {
width: 200px;
height: 50px;
position: relative;
top: -50px;
background-color: red;
}
#inner{
width: 200px;
height: 50px;
position: relative;
top: 40px;
left: 30px;
background-color: green;
z-index: 2;
}
and the HTML...
<div id="div1"></div>
<div id="div2">
<div id="inner"></div>
</div>
Your red div, #div2 doesnt have a z-index. But #div1 and #inner do. If you were to put the z-index on #div2 then the blue div would not appear between the green div and red div.
z-index applies to the parent divs and child divs.
<div id="div1" style="z-index:1"></div>
<div id="div2" style="z-index:2">
<div id="div4" style="z-index:4;"><!--Higher than any of the other divs--></div>
</div>
<div id="div3 style="z-index:3">
<div><!-- any div inside div3 are higher than div1 and div2 but not div4</div>
</div>
I want a few divs to be positioned in a line next to each other, but also allow them to overlap the previous div.
What I'm trying to get is a timeline with divs for events of certain length. The events can overlap each other.
My idea was to give each div the same top position, an increasing z-index and an increasing left position (according to the time of the event). Later I would pop individual divs out by mouse-over events to visualise the overlap.
What I do is to make it so each div gets placed under the next one. With fiddling of the top attribute I can get them to align horizontally, but I don't see the pattern.
<div class="day">
<div style="top: 35px; left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative;"> </div>
<div style="top: 35px; left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative;"> </div>
<div style="top: 35px; left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative;"> </div>
</div>
If I use absolute positions, the elements fly out of the surrounding div and are positioned absolutely at some place in the page.
It's simple. Make an inner div using absolute positioning but wrapped with a div that uses relative positioning:
<div id="container" style="position: relative;width:200px;height:100px;top:100px;background:yellow">
<div id="innerdiv1" style="z-index: 1; position:absolute; width: 100px;height:20px;background:red;">a</div>
<div id="innerdiv2" style="z-index: 2; position:absolute; width: 100px;height:20px;background:blue;left:10px;top:10px;"></div>
</div>
You can use another method like negative margin, but it's not recommended if you want to dynamically change HTML. For example, if you want to move the position of the inner div(s), just set the top/left/right/bottom CSS properties of the container or modify the properties using JavaScript (jQuery or otherwise).
It will keep your code clean and readable.
Use Negative Margins!
<div class="day">
<div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative; margin-top: -15px;"> </div>
<div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative; margin-top: -15px;"> </div>
<div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative; margin-top: -15px;"> </div>
</div>
Fiddle: http://jsfiddle.net/vZv5k/
Another Solution:
Give the .day class a width, height, and position it relatively, keeping the inner divs absolutely positioned.
Check out the below CSS:
.day {position: relative; width: 500px; height: 500px;}
And the HTML:
<div class="day">
<div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1;"> </div>
<div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2;"> </div>
<div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3;"> </div>
</div>
I found the solution. It's probably blindingly obvious to anyone who knows css.
I thought I could not use absolute positioning because my elements would fly out of the surrounding div.
Turns out, I misunderstood absolute positioning. It's not the same as fixed, but to me it looked like that.
https://developer.mozilla.org/en-US/docs/CSS/position explains it well.
Absolute positioning positions absolutely to the next surrounding anchor. That defaults to the whole page, if no other anchor is defined.
To make something a anchor it needs to be position: relative;
Quick solution
add position: relative; to the day class and using absolute positioning in the inner div.
With the top attribute, you can also move relatively positioned objects. In my code sample the red box overlaps the green box due to it's z-index. If you remove the z-index, then the green box is on top.
HTML:
<div class="wrapper">
<div class="box one"></div>
<div class="box two"></div>
</div>
CSS:
.wrapper {
width: 50px;
height: 50px;
overflow: hidden;
}
.box {
width: 100%;
height: 100%;
position: relative;
}
.box.one {
background-color: red;
z-index: 2;
top: 0px;
}
.box.two {
background-color: green;
z-index: 1;
top: -50px;
}
I have a page layout, where I have to set the position of a div relative and top:-30px
The DIV is positioned relative and top:-30 exactely.
But the following DIV then 30px distance at the top. Is there a way to fix this problem.
position: relative doesn't do what I think you think it does. It means that absolutely positioned elements within it are positioned relative to the relative div and not to the page. For example:
<div id="header">Header</div>
<div id="content">
<div id="c1">Content One</div>
<div id="c2">Content Two</div>
</div>
with
#header { position: absolute; top: 0; left: 0; height: 150px; width: 100%; }
#content { position: relative; margin-top: 150px; height: 500px; }
#c1 { position: absolute; top: 0; left: 0; }
#c2 { position: absolute; top: -50px; left: 0; }
c1 will be at the top of the lower div, not the top of the page. content will be 150 pixels from the top of the page. c2 will be above it due to the negative top. header will be at the top of the page.
Make it position:absolute; and its parent position:relative;
This should work :)