Question

我已经创建了一个叠加层来显示可以是任意大小的流畅图像，我需要做的是始终将我的关闭按钮放在图像上方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 Fiddle http://jsfiddle.net/8kZcG/2/

Answer 1

我们可以使用与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;
}

<强> Demo

<强> Source

将元素定位在流动图像上方的死点上方？

1 个答案: