Question

我对CSS不太好:(

所以我有一个自举旋转木马，它显然有图像。我在图片下方添加了一个div，其中包含一个链接，可以打开一个包含更多信息的模式。图像根据窗口的大小调整大小，目前，我的模态链接是从底部开始的固定位置，因此如果窗口足够小，则模态链接可以达到高位。我需要从图像的底部或顶部将其变为可变/百分比量。代码如下。

<div id="our-story-carousel" class="carousel slide" data-ride="carousel" data-interval="false">
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="/img/bg/history-2007.jpg">
            <div class="more-link">
                <div class="more-modal-link">
                    <a class="" href="#" data-toggle="modal" data-target="#our-story-modal-1">More</a>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="/img/bg/history-2008.jpg">
            <div class="more-link">
                <div class="more-modal-link">
                    <a class="" href="#" data-toggle="modal" data-target="#our-story-modal-1">More</a>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="/img/bg/history-2009.jpg">
            <div class="more-link">
                <div class="more-modal-link">
                    <a class="" href="#" data-toggle="modal" data-target="#our-story-modal-1">More</a>
                </div>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#our-story-carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#our-story-carousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

.our-story-item-image img {
    margin: 0 auto;
}

.more-link {
    margin: 0 auto;
    text-align: center;
    z-index: 10;
    position: relative;
    top: -255px;
    background: #a29061;
    height: 72px;
    width: 72px;
    -moz-border-radius: 41px;
    border-radius: 41px;
}

.more-modal-link {
    padding-top: 27px;
    text-transform: uppercase;
}

.more-modal-link a {
    border-top: 1px solid #331a00;
    border-bottom: 1px solid #331a00;
    text-decoration: none;
    color: #331a00;
    font-weight: bold;
}

非常感谢任何帮助。

Answer 1

所以如果它是由窗口大小引起的，请尝试使用@media screen and (min-width: px)然后设置元素

CSS位置模型从div内部的图像底部链接％

1 个答案: