CSS Absolute Positioned Elements and Margins

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 absolutely-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



Leave a reply



Submit