set absolute element full width 100% when relative parent has a smaller width

Question

I have a nasty problem with positioning elements:| So I have a children that need to have full screen width and not the with of relative parent.

body{
  padding: 10px;
}
.container{
  position:relative;
  width: 400px;
  border: 1px solid red;
  padding: 15px;
}
.panel{
  position:relative;
  width:200px; 
  margin: 0 auto;
  height:40px;
}
.panel-body{
  position: absolute;
  width:100%;
}

<div class="container">
  <div class="panel panel-warning">
    <div class="panel-body">
      A Basic Panel
    </div>
  </div>
</div>

so the problem is how to bring the panel-body in front of all other elements and setting the width 100% but 100% from screen not from parent relative. The html structure cannot be modified.

fiddle:

`how to bring the panel-body in front of all other elements`, use [css z-index](http://www.w3schools.com/cssref/pr_pos_z-index.asp). as far as making a child wider than it's parent check [this](http://stackoverflow.com/questions/5581034/is-there-are-way-to-make-a-child-divs-width-wider-than-the-parent-div-using-css) link. — Kevin Kloet, Nov 22 '16 at 12:19
You can set `position: fixed` on `.panel-body` instead of `absolute`. — Mohammad Usman, Nov 22 '16 at 12:22
Is a wrong HTML, if you set the parents to static positioning it will work with absolute. But if you need relative that parents, the children that needs all the screen should be outside on the html. — Marcos Pérez Gude, Nov 22 '16 at 12:23
@Kevin Kloet I don't really like that solution and I cannot modify the html structure :| — BurebistaRuler, Nov 22 '16 at 12:25
i am not sure weather it would work with this html.... not sure. try some popup instead... — Prashanth Benny, Nov 22 '16 at 12:27

score 2 · Answer 1 · answered Nov 22 '16 at 12:40

2

This seem to work, I think I fluke it though.

body{
  padding: 10px;
}
.container{
  position:relative;
  width: 400px;
  border: 1px solid red;
  padding: 15px;
}
.panel{
  position:relative;
  width:200px; 
  margin: 0 auto;
  height:40px;
}
.panel-body{
  position: absolute;
  margin-left: calc(-50% - 20px - 15px);
  width:100vw;
  background-color: yellow;
}

<div class="container">
  <div class="panel panel-warning">
    <div class="panel-body">
      A Basic Panel
    </div>
  </div>
</div>

answered Nov 22 '16 at 12:40

Keith

22,005
2
27
44

1

Nice, I forget about `vw`! – Pete Nov 22 '16 at 12:41
1

No probs. The fluke bit was the 20px, I could understand it been 10px, but thinking about it, I assume the body has a default 10px margin, so this might be were the extra 10px has come from.. So `body-margin + body-padding + container-padding = 10px + 10px + 15px`. Final = `-50% -35px` – Keith Nov 22 '16 at 12:49
@Keith the nasty thing is that when you resize the browser the width is buggy :( – BurebistaRuler Nov 22 '16 at 12:58
When I run the snippet fullscreen, and resize. It seems to work. What browser are you using?.. I've tried it on Chrome / Firefox & Edge. – Keith Nov 22 '16 at 13:13
Do you mean if you resize smaller than .container class, and you get horizontal scroll bars.. If so a media query will fix that one. – Keith Nov 22 '16 at 13:19
@Keith check the fiddle to see the differences when you resize the browser (firefox,chrome, same behavior ): https://jsfiddle.net/DTcHh/27235/ – BurebistaRuler Nov 22 '16 at 13:23
That's just something in fiddle going funky, as you can see using SO snippet works fine, and I've also tested using a HTML server and it works too. – Keith Nov 22 '16 at 13:36
@Keith actually the snippet has a fixed width and because of that the content runs as in a box, I've added also in my app the vw width and I have the same problem :| – BurebistaRuler Nov 22 '16 at 13:40
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/128721/discussion-between-keith-and-burebistaruler). – Keith Nov 22 '16 at 13:43
I've found the problem, your fiddle has bootstrap loaded.. It has classes for panel, so that will be what's overriding. – Keith Nov 22 '16 at 13:45
@Keith yes, because of container width, but I use bootstrap on project :( – BurebistaRuler Nov 22 '16 at 13:57

score 2 · Answer 2 · edited May 23 '17 at 12:24

If i understand question ...

You will need to define margin left and margin top to negative sum value of all parents offsetLeft and top or simple set up position to negative number of offset sum if all parents.

function getOffsetLeft( elem )
{
    var offsetLeft = 0;
    do {
      if ( !isNaN( elem.offsetLeft ) )
      {
          offsetLeft += elem.offsetLeft;
      }
    } while( elem = elem.offsetParent );
    return offsetLeft;
}

I found some answer for you :

finding element's position relative to the document

Now you know your position and it is very easy to set up new position for element position type absolute .

You wanna some kind of fullscreen . Set x position to -(sumOfOffsetLeft) also for y .

For width 100% no need for calculation just use window.innerWidth maybe window.innerWidth/100*95 ( 95% of screen ) .

score 1 · Answer 3 · answered Dec 11 '19 at 08:34

I'm not sure what do you want to do but if you have an element in a smaller relative parent , you can use position:fixed for the child, then set bigger width for it; because An element with position: fixed; is positioned relative to the viewport. it's good if you want to have a full width and full height child inside a position:relative parent.good luck !

set absolute element full width 100% when relative parent has a smaller width

3 Answers3