[已解决]css绝对定位求助

花开半夏—— · 发表于 2023-7-17 16:16:50

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

两行div，每一行有四个div,第一个div和第五个div想用绝对定位的方法在图片上放三行文字
现在只能在第一个div上放文字，第五个放不了，想问一下第一个div绝对定位的前提下第五个div怎么绝对定位
可以给出第一个div和第五个div绝对定位的css代码捕获3.PNG

最佳答案

月排行榜 / 总排行榜

琅琊王朝

2023-7-30 22:26:01

如果你想在第一个 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-17 16:17:09

要实现第一个 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）来控制层叠顺序等。

isdkz · 发表于 2023-7-17 16:17:24

确定如何正确地使用 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 元素的位置。

这就是如何在同一父元素中进行多次绝对定位。希望这个解答对你有所帮助！

the_ben · 发表于 2023-7-17 16:22:48

谢谢鱼币

花开半夏—— · 发表于 2023-7-17 16:24:13

isdkz 发表于 2023-7-17 16:17
确定如何正确地使用 CSS 的绝对定位，首先需要理解这个概念：当一个元素被设定为绝对定位时，它的位置是相 ...

是文字div和图片所在div即item类之间的绝对定位，想把文字放在固定位置，而且重复两个div，文字div距离父级div顶部为257px
不是8个小div定位

sfqxx · 发表于 2023-7-17 16:26:56

要在两个 `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` 合并。

sfqxx_小 · 发表于 2023-7-17 16:30:40

当使用绝对定位（absolute positioning）时，元素的定位是相对于其最近的已定位祖先元素。所以，在这种情况下，为了让第一个div和第五个div都能使用绝对定位，我们需要添加一个共同的已定位祖先元素来包裹这两行div。以下是一个示例的HTML结构和对应的CSS代码：

HTML:

<div class="wrapper">

  <div class="row">

<div class="first-div">

   

</div>

<div class="second-div">

   

</div>

<div class="third-div">

   

</div>

<div class="fourth-div">

   

</div>

  </div>

  <div class="row">

<div class="fifth-div">

   

</div>

<div class="sixth-div">

   

</div>

<div class="seventh-div">

   

</div>

<div class="eighth-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），您就可以在图片上放置三行文字了。

花开半夏—— · 发表于 2023-7-17 16:46:00

sfqxx 发表于 2023-7-17 16:26
要在两个 `div` 上使用绝对定位，你需要确保它们的父元素设置了 `position: relative;`，以便它们能够相对 ...

外层wrap类自带居中，包含8个div,设置完文字divposition为absolute后，文字div居中显示，但是wrap类的1240以及margin:0,auto;又是必须的，想问一下怎么不让文字在wrap类div里居中

琅琊王朝 · 发表于 2023-7-30 22:26:01

如果你想在第一个 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-8-13 01:35:27

琅琊王朝发表于 2023-7-30 22:26
如果你想在第一个 div 上放三行文字，同时在第五个 div 上放三行文字，你可以使用绝对定位来实现。

首先 ...

虽然不需要了，但是还是谢谢🙏

账号		自动登录	找回密码
密码			立即注册

[已解决]css绝对定位求助

马上注册，结交更多好友，享用更多功能^_^

回帖奖励 +6 鱼币

回帖奖励 +6 鱼币

回帖奖励 +6 鱼币

回帖奖励 +6 鱼币

回帖奖励 +6 鱼币