我是Web开发的初学者，并且我正在尝试开发一个响应迅速的网站。在开发过程中，我制作了一个具有图像的div元素，然后在其中包含了一个内容为“ BUILD THAT MATTERS” 的框，该框位于一个类为“ firstBlock”
我试图将图像制作为div firstBlock 的背景图像，但是这使图像变得合适，从而被裁剪了，所以有什么方法可以使div中的框随导航栏下拉菜单移动，到目前为止，只有firstBlock（即图像）移动，但内部框“ BUTERD THAT MATTERS”保持固定在其位置。
<-- html-->
<div id="firstBlock">
<img id="img1" src="image1.jpg">
<div class="box1">
<h1 class="text1">BUILD THAT MATTERS</h1>
</div>
</div>
/*CSS*/
#firstBlock {
display: flex;
height: 90%;
width: 100%;
}
#img1 {
width: 100%;
height: 100%;
object-fit: cover;
}
.box1 {
display: flex;
border: 5px solid black;
position: absolute;
top: 70%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
因此，当导航下拉菜单向下滚动时，内容为“ BUTERD THAT MATTERS”的框应与第一块一起向下移动。
小提琴链接：https://jsfiddle.net/gj7v8huc/
git链接：https://ayush-flash.github.io/StartupLandingPage/StartUpLandingPage/
答案 0 :(得分：1)
非常简单的规则： 将绝对元素的父元素设为相对
您的课程：
.box1 {
display: flex;
border: 5px solid black;
position: absolute; # parent of this should be relative
top: 40%; # I set this to 40%
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
父母：
#firstBlock {
display: flex;
height: 90%;
width: 100%;
position: relative; # take care of child with absolute position
}
这是什么规则？
当我们有一个具有position: absolute的元素时，该元素将从当前文档流中删除。为了使文档回到文档流中，同时又根据absolute职位的需要，可以将父级的职位设置为相对
答案 1 :(得分：1)
所有有关使用position:absolute的父元素和子元素。父元素应具有relative的位置，以便absolute子元素将从其预期的父元素进行top和left的计算。因此，将position:relative应用于您的firstBlock div。
#firstBlock {
display: flex;
height: 90%;
width: 100%;
position:relative;
}
还要根据您的父级对齐方式更改box1 div的顶部和左侧位置。我已经按如下方式申请了50％。
.box1 {
display: flex;
border: 5px solid black;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
我已经在评论中发布了，下面是JSFiddle链接。