为什么我的位置绝对不起作用？

我试图在我的网站上制作这个组件。我想在右侧留下一些图片。它应该适应文字大小，并且必须始终处于最底层。我认为这是可能的位置：绝对和底部：0。但它不起作用。它一直在我的排上，我不知道为什么。为什么我的位置绝对不起作用？

.b-image { 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 

 
.over-image { 
 
    position: relative; 
 
} 
 

 
.content-width { 
 
    max-width: 1440px; 
 
    min-width: 300px; 
 
    margin: 0 auto; 
 
    padding: 0 24px; 
 
    position: relative; 
 
} 
 

 
section { 
 
    padding: 48px 0; 
 
    border-bottom: 1px solid #0000ff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<section> 
 
    <div class="row"> 
 
    <div class="content-width"> 
 
     <div class="content col-md-6"> 
 
     <h1> 
 
      Headline 
 
     </h1> 
 
     <p> 
 
      foo foo foo foo foo foo foo foo foo foo foo foo foo foo 
 
     </p> 
 
     </div> 
 
     <div class="col-md-6 over-image"> 
 
     <img class="b-image" src="http://placehold.it/100x100" alt=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

来源

2017-08-11 Paili

我没有看到你使用'位置：absolute' - 应该说是到位的'位置：汽车'''.b-image'？ –

@RobinJames Ops，是的，你是对的。但仍然没有奏效。 – Paili

如果你有一个元素放置在绝对内部，元素放置在相对位置，那么绝对引用就是包含它的元素。 – Phylogenesis

如果我理解正确的，这是你想要的东西：https://jsfiddle.net/n1a70o1e/

你所要做的是使两个div。一个包含内容，另一个包含图像。为了让它们看起来相邻，给它们一个49％和50％的宽度（50-50稍微宽一些）。使用display: inline-block来实现。它会让你的div显示在一起。然后，您必须使用左侧或右侧的float属性。

将图像放在容器中，就像您一样。该容器将调整其父项，与您的文本相同的父项。使用图像上的max-height用容器调整大小。

来源

2017-08-11 09:54:55

是的，但我想用bootstrap-grid。 – Paili

您可以使用flex来实现此目的。删除position: absolute，只是给display: flex;到.content-width和align-self: flex-end;到.over-image

.over-image{ 
 
    position: relative; 
 
    align-self: flex-end; 
 
} 
 
.content-width { 
 
    max-width: 1440px; 
 
    min-width: 300px; 
 
    margin: 0 auto; 
 
    padding: 0 24px; 
 
    position: relative; 
 
    display: flex; 
 

 
} 
 

 
section { 
 
    padding: 48px 0; 
 
    border-bottom: 1px solid $primary-color-10; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    
 
    <section> 
 
    <div class="row"> 
 
      <div class="content-width"> 
 
      <div class="content col-md-6"> 
 
       <h1> 
 
        Headline 
 
       </h1> 
 
       <p> 
 
       foo foo foo foo foo foo foo foo foo foo foo foo foo foo 
 
       </p> 
 
       <h1> 
 
        Headline 
 
       </h1> 
 
       <p> 
 
       foo foo foo foo foo foo foo foo foo foo foo foo foo foo 
 
       </p> 
 
       <h1> 
 
        Headline 
 
       </h1> 
 
       <p> 
 
       foo foo foo foo foo foo foo foo foo foo foo foo foo foo 
 
       </p> 
 
      </div> 
 
      <div class="col-md-6 over-image"> 
 
       <img class="b-image" src="http://placehold.it/200x200" alt=""> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section>

来源

2017-08-11 09:56:12

取下.B像所有的风格和内容添加到.over图像

.over-image{ 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
}

来源

2017-08-11 10:04:04 user3068032

好吧，现在我的照片在顶部。不在底部。 – Paili

如前所述在mdn文档中

当位置设置为绝对或固定时，底部属性指定元素的底边与其包含块的底边之间的距离。

containing block是一个相对定位的元素。在你的情况下，它是div.over-image它没有指定的高度，并且由于引导类而被浮动。

所以图像的下边缘与div底边对齐，因此它的幻觉总是与前一行文字重叠。为了解决这个问题，你可以给一个高度的div.over-image，这又取决于你的图像尺寸，或者你可以做

.b-image{ 
position: absolute; 
bottom: 0; 
top:0; }

这将导致你的img元素的顶部边缘与包含您的顶部边缘对齐DIV。

PS：不知道这是否是预期的结果，你想要的，但fiddle

来源

2017-08-11 10:14:45 semuzaboi

为什么我的位置绝对不起作用？

回答

相关问题