Using position:absolute while keeping it inside the document flow

问题

It's a screenshot from a page currently I'm building. I'm trying to make sure the green button is always on the bottom of the container. Here is a piece of the code:

HTML

<div class="list-product-pat">
  <article>

   <!-- title, image, spec ... -->

   <div class="pricing-pat">

     <!-- the button goes here -->

   </div>
  </article>
</div>

CSS

 .list-product-pat article {
    position: relative;
    min-height: 260px;
 }

 .list-product-pat .pricing-pat {
    position: absolute;
    bottom: 0;
    width: 100%;
 }

So far there is no problem... until the product spec gets too long and it breaks into the green button.

I want to maintain the green button in the most bottom position, but in the same time I also want the height to extend if the product title/product spec gets too long.

In the ideal world, it should be something like this:

So my idea is to maintain the absolute positioning while still keeping it inside the document flow (so the product spec knows the green button is there and doesn't break through it).

I need it only to extend if the spec height gets too long. In other words, if the spec is in normal height, it wouldn't extent. I'd like to avoid a weird gap between the spec and the green button.

Is there any idea how to do it?

Here is a fiddle to see how I did it: http://jsfiddle.net/xaliber/xrb5U/

回答1:

Adding position:absolute takes it out of the document flow, there's no way to keep it in it. But you can add padding-bottom equivalent to height of the button to the article container instead, which will prevent long text overrunning the button.

.list-product-pat article {
    position: relative;
    min-height: 260px;
    padding-bottom:80px;
    -moz-box-sizing:border-box;
    box-sizing:border-box; 
}

http://jsfiddle.net/xrb5U/3/

A separate issue is that two containers with different amount of texts will be different sizes (if one is larger than the min-height set). There's no easy fix for this in CSS positioning, you have to resort to Javascript, Flexbox or display:table-cell to keep the height of all them the same but each of them has their own issues too.

回答2:

As @mikel already pointed out, you can't keep an element with position: absolute inside the normal document flow, but you can workaround this problem by simulating it.

Considering the example below:

img {
  position: absolute;
}

<img src="https://dummyimage.com/300x400/d9ca29/ffffff">
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>

The <img> element is out of flow, this cause the <span> to be hidden behind it.

You can wrap the absolute element inside an empty container, then add height and width to container equal to height and width of the absolute element. By doing so, an invisible box is created around the absolute element, which makes it appear as part of the document normal flow.

If you already know the exact dimensions of the <img> element, you can simulate normal flow using just css:

div {
  border: 2px dotted grey;
  position: relative;
  width: 300px;
  height: 400px;
}

img {
  position: absolute;
}

<div>
  <img src="https://dummyimage.com/300x400/d9ca29/ffffff">
</div>

<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>

Else, if you don't know the dimensions of the absolute element upfront you have to simulate the normal flow dynamically with javascript:

window.addEventListener('load', function() {
  var div = document.querySelector('div');
  var img = document.querySelector('img');
  var rect = img.getBoundingClientRect();

  div.style.height = rect.height + 'px';
  div.style.width = rect.width + 'px';
});

div {
  border: 2px dotted grey;
  position: relative;
  max-width: 200px;
}

img {
  position: absolute;
  width: 100%;
}

<div>
  <img src="https://dummyimage.com/300x400/d9ca29/ffffff">
</div>

<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>

来源：https://stackoverflow.com/questions/18598031/using-positionabsolute-while-keeping-it-inside-the-document-flow

标签

html

css

css-position