1

我创建了一个叠加层来显示可以是任何大小的流体图像，我需要做的是始终将我的关闭按钮定位在图像上方 30px 并与图像边缘齐平，因为我没有设置宽度在容器上，我不能只是浮动或定位我想要的关闭按钮，所以想知道是否有人可以建议不同的 CSS 方法？我知道我可以用 Javascript 做到这一点，但想知道是否有办法使用它。

CSS

body {
    box-sizing: border-box;
}

.overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    background: rgba(0,0,0,.3);
}

.img-ctn {
    padding: 0;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: 0 20px;
}

.close-overlay {
    outline: none;
    border: none;
    background: grey;
    width: 40px;
    height: 40px;
}

.overlay-img {
    max-width: 100%;
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
}

HTML

<div class="overlay">
    <div class="img-ctn">
        <button class="close-overlay"></button>
        <img src="http://lorempixel.com/output/business-q-c-1244-650-8.jpg" class="overlay-img">
    </div>
</div>

JS 小提琴 http://jsfiddle.net/8kZcG/2/

4

1 回答 1

0

我们可以使用带有 ghost 元素的垂直对齐来围绕图像和关闭按钮将一个灵活大小的容器居中。然后我们将关闭按钮绝对定位到该容器以使其相对于图像。

HTML

<div class="overlay">
    <div class="img-container">
        <div class="img-container2">
            <button class="close-overlay"></button>
            <img src="http://lorempixel.com/business/400/200/" class="overlay-img" />
        </div>
    </div>
</div>

CSS

body {
    box-sizing: border-box;
}
.overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: rgba(0, 0, 0, .3);
}
.img-container {
    height: 100%;
    text-align: center;
}
.img-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.img-container2 {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.close-overlay {
    outline: none;
    border: none;
    background: grey;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 0;
    top: -70px;
}

演示

资源

于 2013-08-29T00:52:22.610 回答