Set position absolute and margin
What are you expecting margin-bottom
to do when your element is positioned by its top side?
margin-bottom
will only do anything to an absolute
ly-positioned element if the element has no top
property.
Why is margin taken into account for absolute positioned elements?
Because that's what the spec says:
An absolutely positioned element is an element whose computed position
value is absolute or fixed. The top, right, bottom, and left
properties specify offsets from the edges of the element's containing
block. (The containing block is the ancestor relative to which the
element is positioned.) If the element has margins, they are added
to the offset. The element establishes a new block formatting
context (BFC) for its contents.
Also: https://www.w3.org/TR/CSS2/visuren.html#propdef-position
...though absolutely positioned boxes have margins, they do not
collapse with any other margins.
Manage margin with absolute position
Its because the container is 120% and display: block. Just display inline-block an you'll get a margin on the right side. See the below example.
html, body, .app { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden;}
.app { overflow: auto;}
.container { height: 120%; width: 120%; margin: 9px; background-color: red; position: relative; display: inline-block;}
.element { position: absolute; background-color: blue; height: 30px; width: 30px; color: white; text-align: center; line-height: 30px;}
.first { top: 0; left: 0;}
.second { top: 0; right: 0;}
.third { right: 0; bottom: 0;}
<div class="app"> <div class="container"> <div class="element first"> 0 </div> <div class="element second"> 1 </div> <div class="element third"> 2 </div> </div></div>
Margin-top for absolute positioned div with bottom property
Okay, let give this a spin.
Maybe this helps you a bit on your way:
http://codepen.io/bbredewold/pen/avgZmj
It would help if you describe the behaviour you want to achieve, including how the page should respond at different sizes. Maybe you can fork (copy) the pen, and make some additions to help us understand your problem.
Good luck!
.outside { position: absolute; overflow: scroll; background: #ccc; bottom: 100px; left: 0; right: 0; top: 0;}.content { outline: 1px solid blue;}#footer { outline: 1px solid red; background: #ccc; height: 50px; display: block; position: absolute; right: 0; left: 0; bottom: 0;}
<div class="outside"> <div class="content">blah blah blah</div> <div class="content">more content</div> <div class="content">even more content</div></div>
<div id="footer">blah blah blah</div>
position absolute & margin bottom
This look can be achieved with a simple gradient.
- Remove the absolute positioning (which essentially makes the element invisible to other elements) and remove the parents height
- Use a linear gradient with the desired colour stops, including
transparent
Example
* { margin: 0; padding: 0; list-style: none;}.bg-black { background: linear-gradient(to bottom, #000 120px, transparent 120px); width: 160px;}.bg-green { width: 120px; background-color: green; margin-bottom: 10px;}
<div class="bg-black"> <div class="bg-green"> <ul> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> </ul> </div>
</div>
<div class="under"> <h1>Under the green container</h1>
</div>
CSS - Absolutely positioned element affected by margin of sibling?
Add display: inline-block;
to the header
element and it should sort it.
CSS absolute position won't work with margin-left:auto margin-right: auto
EDIT : this answer used to claim that it isn't possible to center an absolutely positioned element with margin: auto;
, but this simply isn't true. Because this is the most up-voted and accepted answer, I guessed I'd just change it to be correct.
When you apply the following CSS to an element
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
And then give the element a fixed width and height, such as 200px or 40%, the element will center itself.
Here's a Fiddle that demonstrates the effect.
How can I center an absolutely positioned element in a div?
<body> <div style="position: absolute; left: 50%;"> <div style="position: relative; left: -50%; border: dotted red 1px;"> I am some centered shrink-to-fit content! <br /> tum te tum </div> </div></body>
Related Topics
How to Position Element in The Correct 3D Position with CSS Perspective
Why Calc Is Not Reevaluated When It Is Used for Font-Size
Center Div in Parent with Only Min-Height, and Child May Without Height & with Relative Position
(CSS) How Position Text (With Background Color) Over <Img> Tag Without Absolute Positioning
Absolutely True Centred Background Image
Extension Content Script (Js/Or CSS) Is Not Applying
Center Div on The Middle of Screen
CSS Hide All Images with Matching Src Attribute
Zoom in and Out on Mouse Click with CSS
How to Add Shimmer Effect in CSS
Bootstrap Dropdown Hiding in Modal
CSS Grid Vs Dynamic Definition List Autoplacement
Error While Using The Custom Fonts in CSS
Why Use Ems for Padding & Margins with Browsers Now Scaling Correctly
CSS Percentage Widths and Heights and Resolution Problems