HTML CSS Positions Not Working

CSS: Positioning not working

You have to make the container relative, and the boxes absolute:

<div style = "height:400px;width:400px;border:1px solid #000; position:relative;">
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>

EDIT FOR DEFINITVE ANSWER:

<div style = "height:400px;width:400px;border:1px solid #000; position: relative;">
    <div style = "position: absolute;height:100px;border:1px solid #000; bottom: 0;">
        <div style = "height:100px;width:100px;border:1px solid #000;float:left;"></div>
        <div style = "height:100px;width:100px;border:1px solid #000;float:left;">
    </div>
</div>

Regarding CSS - Using CSS position property but it is not working

The image is positioned 448px above and 200px to the right of your div.
Here is a snippet to illustrate the example:

#last-part-of-the-side-news{
  float:left;
  width: 200px;
  height: 200px;
  background: blue;
  position: absolute;
  top: 448px;
}

#apple{
  background: rgba(255,0,0,0.3);
  width: 230px;
  height: 140px;
  position:relative;
  bottom: 448px;
  left: 200px;
}

<div id = 'last-part-of-the-side-news'>
  <div id = 'apple'></div>
</div>

Position: bottom' not working on relatively positioned button element

Relative positioning is a change in relation to the spot the element is already positioned. So if position: relative, bottom: 0 (or top:0, left:0, right:0, etc) means leave this at the same spot it currently is.

If you want this positioned to the bottom of the element, you need to make the parent element position: relative, and the element you want pinned to the bottom position: absolute (with bottom: 0). Absolutely positioned elements will hop on out of the DOM flow and go instead in relation to it's closest relative parent.

essentially you want:

.wrapper {
  position: relative;
}

.wrapper:nth-child(4){
  position: absolute;
  bottom: 0;
}

CSS Positioning is not working as expected

I would like to explain you how positioning actually works, there are 4 types

• Static (Default)
• Relative
• Absolute
• Fixed

Static position is nothing but a normal flow of the document where elements render on after the another (Excluding floats)

Relative position is something special, which turns out to be a great power when used with position absolute. When you want to use top, left, bottom and right instead of margins, you need to assign position: relative; to that element, after doing so, top, left, right and bottom properties will work.

When you use position: absolute; it gets out of the document flow, so if you have an element called div width class a. Now if you assign position: absolute; to class a, it will get out of the document flow, so when you use top: 0; it will fly away to the top of the document. So in order to restrict it, we wrap a container with position: relative; so that when you use position: absolute;, it will be absolute to that particular element and not the entire document.

Demo 1

Demo 2

Position fixed is entirely different, it is also out of the document flow as same as position: absolute; but the difference is that fixed positioned element cannnot be relative to any element, it has no contact whatsoever with any element, it is always calculated from the top, left, right and bottom of the window and not the element, also a fixed position element will flow as the user scrolls the document.

Demo

---

Coming to your answer, you are using fixed position and absolute position, both are out of the document flow, so they have no relation what so ever...

You are using top: 300px; for fixed position and top:: 150px; for absolute positioned element, so the fixed element will render below the absolute element, but when you try to scroll, your fixed element will scroll along where as position: absolute; element won't.

---

Edit as you commented

Go to w3c Validator and validate your document here

Absolute position is not working

Elements with absolute positioning are positioned from their offsetParent, the nearest ancestor that is also positioned. In your code, none of the ancestors are "positioned" elements, so the div is offset from body element, which is the offsetParent.

The solution is to apply position:relative to the parent div, which forces it to become a positioned element and the child's offsetParent.

<html>
    <body>
        <div style="padding-left: 50px;">
            <div style="height: 100px">
                Some contents
            <div>

            <div style="height: 80px; padding-left: 20px; position: relative;">
                <div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div>
                Some text
            </div>
        </div>
    </body>
</html>

CSS Z-Index not working on absolute positioning

Move position:relative; and the z-index from .forum_post_outside to .forum_arrow_outside, also remove position: absolute; from .forum_arrow_outside, also added float: right; to .forum_arrow_outside:

.forum_post_outside {

  border: none;

  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  box-shadow: none;

  min-height: 75px;

  padding: 0 5px;

  width: 100%;

  background-color: #333;

  margin-bottom: 2px;

}

.forum_arrow_outside {

  position: relative;

  z-index: 1;

  float: right;

  width: 150px;

}

.forum_arrow_top {

  position: absolute;

  top: 0;

  right: 0;

}

.forum_arrow_inside {

  max-width: 110px;

  -moz-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);

  -webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);

  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);

  background-color: #eee;

  padding: 10px;

  border: 1px solid #ccc;

  -moz-border-radius: 2px;

  -webkit-border-radius: 2px;

  -khtml-border-radius: 2px;

  border-radius: 2px;

  z-index: 999;

  position: absolute;

  top: 0;

  left: 0;

}

.forum_drop_down {

  margin: 0!important;

  margin-top: 10px!important;

  line-height: 20px;

  min-width: 110px;

  border-bottom: 1px solid #ccc;

  color: #000;

  

}

<div class="forum_post_outside">

  <div class="forum_arrow_outside">

    <div class="forum_arrow_inside">

      <div class="forum_drop_down">

        <img src="/images/delete_16.png">Delete</div>

      <div class="forum_drop_down">

        <img src="/images/unpin-16.png">Unpin</div>

      <div class="forum_drop_down">

        <img src="/images/edit_16.png">Edit</div>

    </div>

  </div>

</div>

<div class="forum_post_outside">

</div>

<div class="forum_post_outside">

</div>

---

Related Topics