CSS位置固定在区域内的某个位置

Question

我正在使用asp.net和html在商店网站中列出产品清单。 我的项目显示正常，但是我不喜欢按钮的外观根据产品名称的长度而错位。

我试图将“详细信息”按钮固定在底部，而不管产品1,3和5上的方框如何。其他产品的名称将文本向下推。

这些是我所讨论的CSS。

#GameCatalogue
{
    list-style-type:none;
}
#GameCatalogue li {
    /* http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/ */
        width: 200px;
        min-height: 320px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
        border-radius: 7px;
}

.detailsButtom{
    position: relative;
    top: 25px;
/* i tried, vertical-height, alignment, position fixed, absolute, messed around with z-index,  as well as moving the items in different locations through my li containter. 
}

这是我的输出html（用于1个项目）

<li>
<div class="img">
<img alt="" src="../Images/mariou.jpg" id="Graphic1"> 
</div>
<div class="info">
<h3 id="Name" 1'="">SuperMario U</h3>
<p id="Descr1" data-description="Super Mario u is the latest installment of the classic mario franchise. up to 5 players simultaniously can traverse a vast world spanning over 90 unique levels.">
Super Mario u is the...</p>
<div class="price"><span class="st">Our Price:</span>
<strong id="price1">$45.99</strong>
</div><div class="actions"><a href="#details_popup" style="position: relative;top: 25px;" data-toggle="modal" class="btn btn-primary" data-prodcd"1"="">Details</a></div></div></li>

Answer 1

首先，请注意，您发布的CSS代码与发布的DOM不完全匹配（在DOM中， detailsButtom类没有任何元素）。

---

要实现所需的功能，您需要设置position: absolute要“粘贴”到底部的元素的position: absolute 。 然后，需要将其容器的位置设置为position: relative 。 现在，您可以根据需要设置内部元素的坐标（具有以下属性： left ， top ， right ， bottom ）。

---

因此，同样设置.detailsButtom （应该写在bottom ）类：

.detailsButtom {
    position: absolute;
    bottom: 10px;
    left: 0; /* You can change these values */
}

并将容器的类设置为（我假设这是您CSS中的li）：

#GameCatalogue li {
     position: relative;
}

---

进一步阅读

1. CSS技巧-相对位置内的绝对位置
2. 十步学习CSS定位

Answer 2

position:relative我们要手动更改位置的子元素，请使用position:relative作为父元素，对儿童元素使用position:absolute 。 使用position属性时，必须确保使用以下组之一：

1. top ， left属性
2. top ， right属性
3. bottom ， left属性
4. bottom ， right属性

请不要同时使用（ top ， bottom ）和（ right ， left ）属性。