Set Position Absolute and Margin

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.

CSS: margin-right and absolute positioning

Its not margin-right you are looking for it is just right

Please see from my fiddle update:
JSFIDDLE right

And if you want it to sit at the bottom of the screen add bottom

Try this updated fiddle: JSFIDDLE bottom

Margin-right does not work because it add margin to the div area itself, while right is a position value.

If you look at the box model it shows you where the margin is added to. So Margin is really used to give the box space from other objects around itself.

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>

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>

CSS: position: absolute together with margin: auto for centering - How does that work?

#child {  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  height: 100px;  width: 250px;  margin: auto;  background-color: lime;}
#wrap {  width: 100%;  height: 800px;}

<div id="wrap">  <div id="child"></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>

How implementation margin-bottom for position: absolute element

margin-bottom will only do anything to an absolutely-positioned element if the element has no top property.

Remove the top: -5% and then your margin-bottom will work.

Or as mentioned in the comments you can also add a transparent div like this

<div class="spacer"></div>

inside your outside div

.spacer {
    height: 50px;
    margin: 0 0 -50px 0;
    /* margin: 20px 0 -50px 0; use this if you want #container to have a 'bottom padding', in this case of 20px */
    background: transparent; /* you'll need this if #container's parent element has a different background from #container itself */
}

courtesy : Joey

Margin-top: auto not working with position absolute

You should understand, when you add position: absolute the margin-top: auto property doesn't work. So to make it position to bottom of its parent element, you have to add bottom: 0 property and position: relative to its parent element. Try update your code like this.

.profileMain {
  display: flex;
  position: relative;
}

.userInfo {
  width: 50%;
  position: absolute;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: red;
  bottom: 0;
}

The answer for 'why?' is, when you apply position:absolute to any element, that element starts floating above all other elements simply like a different layer. As such, the element with position:absolute can't render the margin-top: auto property as it won't find the corresponding edge as of from where it should apply the auto value for margin-top property. I guess, this makes it a bit clear on the 'why?'

Position absolute and margin: auto

Since you know the width of the footer (1100px), you can just do a left:50%;margin-left:-550px to center it.

Example: Centering an absolutely positioned element

http://jsfiddle.net/vdWQG/

Therefore, footer would become:

#footer
{
    width: 1100PX;
    height: 50px;
    position: absolute;
    bottom: 0;
    left:50%;           /* Add this */
    margin-left:-550px; /* Add this (this is half of #footers width) */
    background-color: #282828;
}

If you want the element to stick on the bottom of the page as the user scrolls down, use position: fixed instead of position:absolute

Set Position Absolute and Margin