我试图使用图像上的绝对位置和父级上的相对位置在父级 div 内部移动图像,但是当我这样做时它会将它推到父级 div 之外。下面是 html/css
<div class="work">
<h2 class='workHeader'>work</h2>
<div class="container">
<div class="aboutProject">
<h3 class="projectTitle">Peak Choice</h3>
<p class="projectDescription">
Peak Choice provides real-time data to make choosing where your next Colorado Ski trip easier.
</p>
</div>
<div class="projectImageSection">
<img class='peakChoiceImage' src="/img/peakchoicemockup.png">
</div>
</div>
</div>
.work {
/*position: absolute;*/
text-align: center;
width: 100%;
}
.workHeader {
margin-top: 1rem;
margin-bottom: 2rem;
}
.container {
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(auto);
grid-template-areas:
"c i"
"c i";
}
.projectImageSection {
/*background-color:#ABECF0;*/
position: relative;
/*overflow: hidden;*/
}
.peakChoiceImage {
position: absolute;
height: auto;
width: 25rem;
}
最佳答案
text-align: center
应用于 .projectImageSection
在 .peakChoiceImage
上设置 left: 0;
以移动到相对定位父级左侧的图像。
关于html - 为什么将 child 定位为其相关 parent 的绝对地位将其推到父 div 之外?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48064774/