Is There a Way for a Particular Div to Ignore It's Parent Div's Positioning

Is there a way for a particular div to ignore it's parent div's positioning?

Unfortunately there's no way to make an element "compensate" for its parent's relative positioning dynamically with CSS. Barring rethinking the layout and since position:fixed is not what you are after, your options are:

1. Manuallly compensate for parent's positioning. Give the child element position:relative and offsets exactly opposite from what the parent has (you will need to key in the exact values again). Minimum fuss, but you now have to remember to keep the two pairs of offsets (for parent and child) in sync manually. Placing a comment saying "if you change this you also have to change #THAT" will help.
2. Dynamically move the child with Javascript. You can perform some calculations after layout is done and move the child element back to where you want it to be. Not a clean solution in the least, it might result in a brief visual jump and will not work for people with Javascript disabled (leaving your site visually broken). The only upside is that it needs no maintenance unless your layout changes radically.

All in all, I 'd recommend doing #1 over #2, and only if the best solution (changing the layout) is not available to you.

How to ignore parent element's overflow:hidden in css

Method 1

A good way to do it is by setting the overflowing element to position:fixed (which will make it ignore the parent overflow), and then positioning it relative to the parent using this technique:

​.parent {
   position: relative;      
   .fixed-wrapper {
       position: absolute;         
       .fixed {
           position: fixed;
       }
   }
}

One caveat is that you cannot have any of the top,right,left,bottom properties set on the fixed element (they must all be default 'auto'). If you need to adjust the position slightly, you can do so using positive/negative margins instead.

Method 2

Another trick I recently discovered is to keep the overflow:hidden element with position:static and position the overriding element relative to a higher parent (rather than the overflow:hidden parent). Like so:

http://jsfiddle.net/kv0bLpw8/

How to ignore a certain element when determining parent's size

Add a big negative margin to the ignore element while setting the width.

#parent {  background:red;  padding:5px;  display:inline-block;}#parent > div {  height:20px;  background:blue;  margin-bottom:5px;}
.ignore {  margin-right:-500px;    /*to illustrate*/  animation:change 2s linear infinite alternate;}
@keyframes change {  from {width:10px;}  to {width:100px;}}

<div id="parent">    <div class="ignore"></div>    <div style="width: 30px"></div>    <div></div>    <div style="width: 40px"></div>    <div class="ignore"></div>    <div style="width: 30px"></div></div>

Is it possible enable div tag do not follow the parent div padding?

If you know the amount of padding the parent div has, you can simply reverse it like this:

.padding {     /* child element */
  width: 100%; 
  height:300px;
  margin-left: 50px; 
  padding-left: 50px; 
  background:#000;
}
.padding div {  /* child element */
  position:relative;  /* cling to parent */
  width: 100%;
  height:200px;
  left: -25px;  /* move back to edge of parent*/
  background:#f00;
}

Absolute positioning ignoring padding of parent

First, let's see why this is happening.

The reason is that, surprisingly, when a box has position: absolute its containing box is the parent's padding box (that is, the box around its padding). This is surprising because usually (that is, when using static or relative positioning) the containing box is the parent's content box.

Here is the relevant part of the CSS specification:

In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element.... Otherwise, the containing block is formed by the padding edge of the ancestor.

The simplest approach—as suggested in Winter's answer—is to use padding: inherit on the absolutely positioned div. It only works, though, if you don't want the absolutely positioned div to have any additional padding of its own. I think the most general-purpose solutions (in that both elements can have their own independent padding) are:

1. Add an extra relatively positioned div (with no padding) around the absolutely positioned div. That new div will respect the padding of its parent, and the absolutely positioned div will then fill it.

   The downside, of course, is that you're messing with the HTML simply for presentational purposes.

2. Repeat the padding (or add to it) on the absolutely positioned element.

   The downside here is that you have to repeat the values in your CSS, which is brittle if you're writing the CSS directly. However, if you're using a pre-processing tool like SASS or LESS you can avoid that problem by using a variable. This is the method I personally use.

How can I have 2nd div row ignore parent div's width

Solved this issue by using position: absolute tag. See JSfiddle at: https://jsfiddle.net/sachingpta/3qu3m466/. Sample code

`

html,body{
    height: 100%;
    padding: 0px;
    margin: 0px;
}
.parent{
    width: 300px;
    height: 100%;
    background-color: grey;    
    margin: 0 auto;
}
.child1{
    background-color: red;
}
.child2{
    background-color: green;
    position: absolute;
    left: 0px;
    right: 0px;
}
.child3{
    background-color: blue;
}

`

Can I position an element fixed relative to parent?

Let me provide answers to both possible questions. Note that your existing title (and original post) ask a question different than what you seek in your edit and subsequent comment.

---

To position an element "fixed" relative to a parent element, you want position:absolute on the child element, and any position mode other than the default or static on your parent element.

For example:

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

This will position childDiv element 50 pixels left and 20 pixels down relative to parentDiv's position.

---

To position an element "fixed" relative to the window, you want position:fixed, and can use top:, left:, right:, and bottom: to position as you see fit.

For example:

#yourDiv { position:fixed; bottom:40px; right:40px; }

This will position yourDiv fixed relative to the web browser window, 40 pixels from the bottom edge and 40 pixels from the right edge.

Make absolute positioned div expand parent div height

You answered the question yourself:

I know that absolute positioned elements are removed from the flow, thus ignored by other elements.

So you can't set the parents height according to an absolutely positioned element.

You either use fixed heights or you need to involve JavaScript.

Nowadays one might use CSS flexbox or grid layout to reverse the visual order of HTML elements inside a parent container without using position: absolute;. See also Reverse order of columns in CSS Grid Layout

---

Related Topics