Can't make max-width work when using absolute positioning

问题

I can't get max-width to work when using absolute positioning. In https://jsfiddle.net/jn2bs6ax/ the item should take as little width as possible, up to the max-width of 1000px. But it's taking a width of about 50% and wrapping the text. How to make it work? If I set the max-width to something small like 300px it works, but anything larger than what it's width currently is doesn't cause it to expand.

This example just shows an item that's been absolutely positioned to the center below an item, but I use transform, top, bottom, left and right to position things in all 4 directions relative to an item. The solution should work with all 4 cases.

There's a similar question CSS (position:absolute + left:50% = max-width:50%)? but the answer only works with centering below but not for all cases like positioning to right of an item vertically centered.

<div class="relative">
  text
  <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
</div>

css

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 100%;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

回答1:

Try setting display: inline-table; or display: table;

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 1000px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-table;
}

<div class="relative">
  text
  <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
</div>

回答2:

Try add width: 100%; for your class along max-width in any place.

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 1000px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

<div class="relative">
  text
  <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
</div>

回答3:

As you already noticed, the issue is related to left:50% that will restrict the width of the element to 50% of the parent element.

One hacky way to overcome this is to increase the width of the parent element by adding more padding since absolute element will consider the padding-box. Then you add negative margin to rectify the added padding. You should simply pay attention to overflow:

.relative {
  position: relative;
  padding:0 50%;
  margin:0 -50%;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 800px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}


.hide {
 overflow:hidden;
 height:500px;
}

<div class="hide">
<div class="relative">
  text
  <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
  <div class="absolute" style="top:200px;">Lorem ipsum dolor sit amet</div>
</div>
</div>

来源：https://stackoverflow.com/questions/56183507/cant-make-max-width-work-when-using-absolute-positioning

标签

html

css

html5

css3

css-position