css绝对定位求助
两行div，每一行有四个div,第一个div和第五个div想用绝对定位的方法在图片上放三行文字现在只能在第一个div上放文字，第五个放不了，想问一下第一个div绝对定位的前提下第五个div怎么绝对定位
可以给出第一个div和第五个div绝对定位的css代码 要实现第一个 div 和第五个 div 的绝对定位并放置在图片上，你可以按照以下步骤进行操作：
首先，给包含两行 div 的父元素添加相对定位，以便子元素可以使用绝对定位相对于父元素进行定位。假设父元素的类名为 .container，可以使用如下 CSS 代码：
.container {
position: relative;
}
然后，针对第一个 div 和第五个 div 分别添加绝对定位。假设这两个 div 分别具有类名 .first-div 和 .fifth-div，可以使用如下 CSS 代码：
.first-div {
position: absolute;
top: 0;
left: 0;
}
.fifth-div {
position: absolute;
bottom: 0;
right: 0;
}
其中，.first-div 使用 top: 0; left: 0; 将其定位于父容器的左上角，.fifth-div 使用 bottom: 0; right: 0; 将其定位于父容器的右下角。
请注意，以上代码只是示例，实际应用时需要根据你的 HTML 结构和样式进行适当调整。确保父元素有足够的高度和宽度来容纳子元素，并且可能需要使用其他 CSS 属性（如 z-index）来控制层叠顺序等。 确定如何正确地使用 CSS 的绝对定位，首先需要理解这个概念：当一个元素被设定为绝对定位时，它的位置是相对于最近的已定位祖先元素（比如，设置了 position 属性为 relative ,absolute ,fixed 或 sticky 的元素）。如果不存在已定位的祖先元素，那么元素的位置则是相对于初始包含块。
为了实现你的需求，你需要在每一个你想要进行绝对定位的 div 的外层再包裹一层父级 div，然后给这个父级 div 设置一个 position: relative ，这样子 div 就可以根据这个父级 div 进行绝对定位了。
假设你的HTML结构如下：
<div class="parent">
<div class="child">这是第一个div</div>
</div>
<div class="parent">
<div class="child">这是第五个div</div>
</div>
你可以这样设置你的CSS代码：
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
}
在这段 CSS 代码中， .parent 元素被设为了 relative ，这样其子元素 .child （你的第一个和第五个 div）就可以根据父元素进行绝对定位了。然后 .child 元素被设定为 absolute ，通过 top: 0; 和 left: 0; 使其定位到父元素的左上角。你可以根据你的需要调整 top 和 left 的值来改变 .child 元素的位置。
这就是如何在同一父元素中进行多次绝对定位。希望这个解答对你有所帮助！ 谢谢鱼币 isdkz 发表于 2023-7-17 16:17
确定如何正确地使用 CSS 的绝对定位，首先需要理解这个概念：当一个元素被设定为绝对定位时，它的位置是相 ...
是文字div和图片所在div即item类之间的绝对定位，想把文字放在固定位置，而且重复两个div，文字div距离父级div顶部为257px
不是8个小div定位 要在两个 `div` 上使用绝对定位，你需要确保它们的父元素设置了 `position: relative;`，以便它们能够相对于其父元素进行定位。同时，你需要指定 `top`, `right`, `bottom` 或 `left` 属性来确定 `div` 的具体位置。
以下是你可能需要的 CSS 代码：
.parent-div {
position: relative;
}
.div-1,
.div-5 {
position: absolute;
/* 这里可以根据需要调整 top 和 left 的值 */
top: 0;
left: 0;
}
.div-1 {
/* 这里可以根据你的图片和文字要求，调整这个 div 的宽度、高度、背景色等样式 */
}
.div-5 {
/* 这里可以根据你的图片和文字要求，调整这个 div 的宽度、高度、背景色等样式 */
/* 如果两个 div 是属于不同的父 div，并且你希望 .div-5 在页面上的位置与 .div-1 一样，可以调整 top 和 left 的值 */
}
注意，一个绝对定位元素的位置相对于最近的已定位祖先（不是 `static` 的）计算。如果绝对定位元素没有已定位的祖先，那么它的位置相对于初始包含块。此外，一个绝对定位元素的 `margin` 不会与其他任何 `margin` 合并。 当使用绝对定位（absolute positioning）时，元素的定位是相对于其最近的已定位祖先元素。所以，在这种情况下，为了让第一个div和第五个div都能使用绝对定位，我们需要添加一个共同的已定位祖先元素来包裹这两行div。以下是一个示例的HTML结构和对应的CSS代码：
HTML:
<div class="wrapper">
<div class="row">
<div class="first-div">
<!-- 第一个div的内容 -->
</div>
<div class="second-div">
<!-- 第二个div的内容 -->
</div>
<div class="third-div">
<!-- 第三个div的内容 -->
</div>
<div class="fourth-div">
<!-- 第四个div的内容 -->
</div>
</div>
<div class="row">
<div class="fifth-div">
<!-- 第五个div的内容 -->
</div>
<div class="sixth-div">
<!-- 第六个div的内容 -->
</div>
<div class="seventh-div">
<!-- 第七个div的内容 -->
</div>
<div class="eighth-div">
<!-- 第八个div的内容 -->
</div>
</div>
</div>
CSS:
.wrapper {
position: relative; /* 声明为已定位元素的祖先元素 */
}
.first-div, .fifth-div {
position: absolute;
/* 根据需要进行定位，可以使用top、left、right、bottom等属性调整位置 */
/* 例如： */
top: 50px;
}
/* 其他div的样式和布局 */
.row {
display: flex;
}
/* 假设每个div的宽度相等，可以根据实际情况进行调整 */
.first-div, .second-div, .third-div, .fourth-div,
.fifth-div, .sixth-div, .seventh-div, .eighth-div {
width: 100px;
}
请注意，示例中的CSS代码仅为参考，您可以根据实际需求进行调整和修改。通过将这两行div放在一个共同的包裹元素中，并给这个包裹元素设置相对定位（position: relative），然后分别为第一个div和第五个div设置绝对定位（position: absolute），您就可以在图片上放置三行文字了。 sfqxx 发表于 2023-7-17 16:26
要在两个 `div` 上使用绝对定位，你需要确保它们的父元素设置了 `position: relative;`，以便它们能够相对 ...
外层wrap类自带居中，包含8个div,设置完文字divposition为absolute后，文字div居中显示，但是wrap类的1240以及margin:0,auto;又是必须的，想问一下怎么不让文字在wrap类div里居中 如果你想在第一个 div 上放三行文字，同时在第五个 div 上放三行文字，你可以使用绝对定位来实现。
首先，将图片所在的 div 设为相对定位（relative），这样可以将子元素（第一个和第五个 div）相对于这个 div 进行绝对定位。然后，将第一个和第五个 div 设为绝对定位（absolute），并使用 top、right、bottom 和 left 属性来确定它们在父元素中的位置。
以下是一个简单的例子：
<div style="position: relative; height: 300px; width: 400px; background-image: url('your-image-url'); background-size: cover;">
<div style="position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: red;"></div>
<div style="position: absolute; top: 120px; left: 50px; width: 100px; height: 100px; background-color: blue;"></div>
<div style="position: absolute; top: 200px; left: 50px; width: 100px; height: 100px; background-color: green;"></div>
<div style="position: absolute; top: 50px; left: 200px; width: 100px; height: 100px; background-color: yellow;"></div>
<div style="position: absolute; top: 120px; left: 200px; width: 100px; height: 100px; background-color: purple;"></div>
<div style="position: absolute; top: 200px; left: 200px; width: 100px; height: 100px; background-color: orange;"></div>
</div>
在这个例子中，父元素设置了相对定位，并且设置了高度和宽度。然后，子元素（第一个和第五个 div）设置为绝对定位，并使用 top 和 left 属性来确定它们在父元素中的位置。你可以根据需要调整 top 和 left 的值来达到你想要的效果。
注意：在使用绝对定位时，需要确保父元素是相对定位或者绝对定位。否则，子元素将无法正确地相对于父元素进行定位。 琅琊王朝 发表于 2023-7-30 22:26
如果你想在第一个 div 上放三行文字，同时在第五个 div 上放三行文字，你可以使用绝对定位来实现。
首先 ...
虽然不需要了，但是还是谢谢🙏
页:
[1]