CODEWITHSUNDEEP
javascriptjqueryhtmlcss
BurebistaRuler
BurebistaRuler

Reputation: 6519

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

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:

Upvotes: 1

Views: 2832

Answers (3)

Zeinab_Ns
Zeinab_Ns

Reputation: 305

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 !

Upvotes: 1

Nikola Lukic
Nikola Lukic

Reputation: 4244

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 ) .

Upvotes: 2

Keith
Keith

Reputation: 24191

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>

Upvotes: 2

Related Questions