How to Make the Absolute Child Width Independent from the Relative Parent Width

How to make the absolute child width independent from the relative parent width?

Just delete the position:relative; of #main_menu li

http://jsfiddle.net/STfGL/4/

Is it possible for absolute div to have width: auto, and also ignore it's parent's width?

This is somewhat solved by wrapping abs in an absolute div that has a much wider width than the relative parent. The problem now becomes sizing wrapper to stretch to the right of the viewport, which is a topic for another question.

.parent {  position: relative;  background: #EEE content-box; /* Color only the content */  width: 100px;}.abs-wrapper {  position: absolute;  width: 800px;}.abs {  position: absolute;  max-width: 200px;  border: 1px solid gray;}

  <div class="parent">    <div>      Doesn't work.    </div>    <div class="abs-wrapper">      <div class="abs">        This correctly wraps after 200px, because it's parent is a wrapper with a very large width. Thus, this div will stretch-to-fit, and also honor max-width.      </div>    </div>  </div>        <div class="parent" style="margin-top: 150px">    <div>      Doesn't work.    </div>    <div class="abs-wrapper">      <div class="abs">        < 200px shrinks to fit.      </div>    </div>  </div>

Is there a way to make a child DIV's width wider than the parent DIV using CSS?

Use absolute positioning

.child-div {
    position:absolute;
    left:0;
    right:0;
}

Relative child 100% width of relative parent

You can set the display property of your code tag to block:

.parent code {
  position: relative;
  background: blue;
  display: block;
}

jsFiddle example

CSS position relative : width not considered

When the CSS position (in .second::before) is set to relative, the width (fixed in pixels) is not considered, only the vertical line is displayed and width is "forced by the browser" to 1 pixel.

A pseudo element is an inline element by default, setting position:relative will not change this thus you cannot apply width and height to the element. Then the borwser is not forcing the width to 1px, it's the border you have set that is equal to 1px. The height also isn't working and the height of the element and the border is defined by the font property.

Increase the height and you will see that nothing will change:

.first {
  background-color: #dc3545;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 20px;
  padding: 5px 10px;
  margin-top: 10px;
}

.second {
  background-color: #6f42c1;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 5px;
  padding: 5px 10px;
  margin-top: 10px;
  margin-left: 10px;
}

.second::before {
  content: "";
  top: -13px;
  left: -30px;
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #000;
  border-radius: 0 0 0 0px;
  height: 600px;
  width: 50px !important;
}

<span class="first">First</span>
<span class="second">Second</span>

How to make parent element the same size as his child which is absolutely positioned to his grandparent?

I have no idea why are you making all this complicated. I have changed the code in a simpler form, hope this is what you want. if you want something else specific please do comment.

.grandparent {    display: flex;    align-items: center;    justify-content: center;    height: 650px;    width: 100%;    margin: 0 0 25px 0;    background-color: #464646;    text-align: center;  }
  .parent-wrapper {    display: inline-block;  }    img {   max-width: 100%;  }

<div class="grandparent">  <div class="parent-wrapper">    <img class="child-image" src="https://cfl.dropboxstatic.com/static/images/index/rebrand/co_create/desktop/dropbox_digital_desktop_02-vflq-5NiU.jpg">  </div></div>

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.

Position absolute `div` inside position relative parent `div` disappearing on chrome and edge

You need to give width to all circles as they become independent when you give them position: absolute. So modify your css code like this:

.child1, .child2, .child3 {
    position: absolute; /* Turn off to see circles in chrome*/
    top: 0;
    width: 100%;
}

Thanks me later.

---

Related Topics