我想将这些按钮放在它们上方三个图像顶部的图标按钮旁边。我尝试将它们设置为 position: absolute; 并使用 z-index 但这会导致按钮未在每个图像的顶部对齐,如果我手动定位它们,每当我调整窗口大小时它们不再对齐。我想将这些按钮保留在图像所在的 div 中,同时仍然覆盖它们。这可能吗?下图显示了它目前的样子
这是代码:
<div class="imageSection">
<div class="container paddingContainer">
<div class="row">
<div class="col-4 borderEraser">
<img class="imageResize" src="{% static 'webapp/images/srblogthumb.jpg' %}">
<div class="info">
<a class="btn btn-dark alignLeft" href="https://sebastianrichardsblog.herokuapp.com/home">View Project</a>
<a class="btn btn-dark alignRight" href="#">View Code</a>
<a href="#">
<img class="iconImage" id="info1" src="{% static 'webapp/images/infoIcon.png' %}">
</a>
</div>
</div>
<div class="col-4 borderEraser">
<img class="imageResize" src="{% static 'webapp/images/digitaltwinthumb.jpg' %}">
<div class="info">
<a class="btn btn-dark alignLeft" href="https://sebastianrichardsblog.herokuapp.com/home">View Project</a>
<a class="btn btn-dark alignRight" href="#">View Code</a>
<a href="#">
<img class="iconImage" id="info2" src="{% static 'webapp/images/infoIcon.png' %}">
</a>
</div>
</div>
<div class="col-4 borderEraser">
<img class="imageResize" src="{% static 'webapp/images/mariopicthumb.jpg' %}">
<div class="info">
<a class="btn btn-dark alignLeft" href="https://sebastianrichardsblog.herokuapp.com/home">View Project</a>
<a class="btn btn-dark alignRight" href="#">View Code</a>
<a href="#">
<img class="iconImage" id="info3" src="{% static 'webapp/images/infoIcon.png' %}">
</a>
</div>
</div>
</div>
和CSS:
body {
background-image: url("images/background2.jpeg");
}
h1 {
color:aliceblue;
}
.srlogoimage {
width: 75%;
height: 75%
}
.hidden {
display: none;
}
.textCentered {
text-align: center;
}
.imageResize {
position: relative;
width: 98%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
background-size: cover;
border-radius: 10%;
max-height: 100%;
max-width: 100%;
}
.borderEraser {
margin-left: 0px;
margin-right: 0px;
border-left: none;
border-right: none;
display: block;
padding-left: 0px;
padding-right: 0px;
}
.alignRight {
float: right;
justify-content: center;
}
.alignLeft {
float: left;
justify-content: center;
}
.alignBottom {
text-align: center;
}
.imageSection {
position: relative;
z-index: 0;
}
.info {
padding: 1%;
z-index: 9;
}
.iconImage {
max-height: 10%;
max-width: 10%;
border-radius: 50%;
background-color: aliceblue;
}
.paddingContainer {
border-color: blanchedalmond;
border: 50%;
padding-left: 9%;
padding-right: 9%;
}
任何帮助或指示将不胜感激,我已经坚持了一周
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句