html - 将圆形图像添加到方形 Div 的顶部中心

Question

我正在尝试复制您在本网站上看到的内容:http://midwc.net/ ，其中标题上方有四个带有圆形图像的 div(“Container Catalogue”、“Custom Containers”、“You First”、“Blog”)。您可以看到圆圈在水平和垂直方向上完美居中(穿过正方形的顶部边界)。

不幸的是，我的尝试还差得很远:

首先，您可以看到图像及其边框之间有空间 - 我需要摆脱它。边框应直接围绕图像。

其次，圆圈图像在它们应在的位置的上方和左侧，但我想知道解决此问题的最佳方法是不使用 magjc 数字，因为它们在页面调整大小时不起作用。

这是一个 JS fiddle :

https://jsfiddle.net/cwzm8cbj/2/

HTML:

<div class = "container-1">
<div class = "bs-container">
    <div class = "circle-wrapper">
        <img class = "circle" src = "http://thebullshitcollection/wp-content/uploads/2017/04/Bullshit_Drawing.png"/>
    </div>
    <h3>BULLSHIT DRAWINGS</h3>
    <p>Black and white, colored pencil drawings of actual bullshit.</p>
    <div class="center-button">
    <a href="#" class="more-bs-a">
        <button class="more-bs">More Bullshit</button>
    </a>
    </div>
</div> 

<div class = "bs-container">
    <div class = "circle-wrapper">
        <img class = "circle" src = "http://thebullshitcollection/wp-content/uploads/2017/04/Bullshit_Photograph.png"/>
    </div>
    <h3>BULLSHIT PHOTOGRAPHY</h3>
    <p>Black and white, color photographs in a wide variety of sizes.
    </p>
    <div class="center-button">
    <a href="#" class="more-bs-a">
        <button class="more-bs">More Bullshit</button>
    </a>
    </div>
</div>  

<div class = "bs-container">
    <div class = "circle-wrapper">
        <img class = "circle" src = "http://thebullshitcollection/wp-content/uploads/2017/04/Bullshit_Tutorial.png"/>
    </div>
    <h3>BULLSHIT TUTORIALS</h3>
    <p>Free, online tutorials to help you draw your own bullshit.</p>
    <div class="center-button">
    <a href="#" class="more-bs-a">
        <button class="more-bs">Subscribe</button>
    </a>
    </div>
</div>   
</div>

CSS:

.container-1 {
display: flex;
justify-content: space-between;
}

.bs-container {
border: 1px solid #BCBEC0;
display: inline-block;
overflow: hidden;
margin-right: 1.8%;
margin-top: 100px;
margin-bottom: 100px;
height: 220px;
width: 360px;
/*gradient background developed here: http://colorzilla.com/gradient-editor/#ffffff+0,f5f0dd+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,240,221,1) 100%); 
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(245,240,221,1) 100%); 
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(245,240,221,1) 100%); 
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f0dd',GradientType=0 ); 
/* IE6-9 */
}

.bs-container h3 {
color: #BCBEC0;
text-align: center;
font-family: PT Sans Narrow;
font-size: 23px;
}

.bs-container p {
font-size: 18px;
font-family: PT Sans Narrow;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}

.circle-wrapper {
position: absolute;
z-index: 999;
top: -50px;
width: 260px;
text-align: center;
}

.circle {
border: 5px solid #BCBEC0;
border-radius: 50%; 
}

.more-bs {
text-align: center;
font-family: Beautiful ES;
color: white;
background-color: #543D2B;
border: 4px solid #000000;
height: 48px;
font-size: 33px;
vertical-align: middle;
padding-top: 14px;
padding-right: 10px;
padding-left: 10px;
}

.more-bs:hover {
color: #9B6A49;
transition: all 0.2s ease-in-out;
}

.more-bs-a {
color: white;
text-decoration: none;
}

.more-bs-a:hover {
color: #9B6A49;
transition: all 0.2s ease-in-out;
}

.center-button {
text-align: center;
}

.container, .container-1 {
width: 80.9%;
padding: 0px 5% 0 10%;
}

无论页面大小如何，我怎样才能使这些图像始终位于 div 顶部的中心？我需要 JavaScript 吗？

谢谢

编辑:将position: relative 添加到.bs-container 类之后:

编辑 2:将这些样式应用到 .circle-wrapper 之后:

这让我差不多完成了 - 现在我只需要图像出现在容器的顶部，就像它们在一个新的单独层上一样。

Answer 1

尝试添加到 .bs-container

overflow: visible !important; 和 position: relative;

并更新 .circle-wrapper 看起来像这样

.circle-wrapper {
    position: absolute;
    z-index: 999;
    top: -8%;
    left: 50%;
    width: 260px;
    text-align: center;
    transform: translateX(-50%) translateY(0%);
}

我无法测试您的图片，因为它们没有加载。您可以使用 .circle-wrapper

的 top 和 left 值