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

花开半夏——

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

最佳答案

月排行榜 / 总排行榜

琅琊王朝

2023-7-30 22:26:01

如果你想在第一个 div 上放三行文字，同时在第五个 div 上放三行文字，你可以使用绝对定位来实现。

首先，将图片所在的 div 设为相对定位（relative），这样可以将子元素（第一个和第五个 div）相对于这个 div 进行绝对定位。然后，将第一个和第五个 div 设为绝对定位（absolute），并使用 top、right、bottom 和 left 属性来确定它们在父元素中的位置。

以下是一个简单的例子：

1. <div style="position: relative; height: 300px; width: 400px; background-image: url('your-image-url'); background-size: cover;">  
   
2.     <div style="position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: red;"></div>  
   
3.     <div style="position: absolute; top: 120px; left: 50px; width: 100px; height: 100px; background-color: blue;"></div>  
   
4.     <div style="position: absolute; top: 200px; left: 50px; width: 100px; height: 100px; background-color: green;"></div>  
   
5.     <div style="position: absolute; top: 50px; left: 200px; width: 100px; height: 100px; background-color: yellow;"></div>  
   
6.     <div style="position: absolute; top: 120px; left: 200px; width: 100px; height: 100px; background-color: purple;"></div>  
   
7.     <div style="position: absolute; top: 200px; left: 200px; width: 100px; height: 100px; background-color: orange;"></div>  
   
8. </div>

复制代码

在这个例子中，父元素设置了相对定位，并且设置了高度和宽度。然后，子元素（第一个和第五个 div）设置为绝对定位，并使用 top 和 left 属性来确定它们在父元素中的位置。你可以根据需要调整 top 和 left 的值来达到你想要的效果。

注意：在使用绝对定位时，需要确保父元素是相对定位或者绝对定位。否则，子元素将无法正确地相对于父元素进行定位。

跳转到最佳答案楼层

陶远航

要实现第一个 div 和第五个 div 的绝对定位并放置在图片上，你可以按照以下步骤进行操作：

首先，给包含两行 div 的父元素添加相对定位，以便子元素可以使用绝对定位相对于父元素进行定位。假设父元素的类名为 .container，可以使用如下 CSS 代码：

1. .container {
2.   position: relative;
3. }

复制代码

然后，针对第一个 div 和第五个 div 分别添加绝对定位。假设这两个 div 分别具有类名 .first-div 和 .fifth-div，可以使用如下 CSS 代码：

1. .first-div {
2.   position: absolute;
3.   top: 0;
4.   left: 0;
5. }
7. .fifth-div {
8.   position: absolute;
9.   bottom: 0;
10.   right: 0;
11. }

复制代码

其中，.first-div 使用 top: 0; left: 0; 将其定位于父容器的左上角，.fifth-div 使用 bottom: 0; right: 0; 将其定位于父容器的右下角。

请注意，以上代码只是示例，实际应用时需要根据你的 HTML 结构和样式进行适当调整。确保父元素有足够的高度和宽度来容纳子元素，并且可能需要使用其他 CSS 属性（如 z-index）来控制层叠顺序等。

isdkz

确定如何正确地使用 CSS 的绝对定位，首先需要理解这个概念：当一个元素被设定为绝对定位时，它的位置是相对于最近的已定位祖先元素（比如，设置了 position 属性为 relative ,  absolute ,  fixed 或 sticky 的元素）。如果不存在已定位的祖先元素，那么元素的位置则是相对于初始包含块。

为了实现你的需求，你需要在每一个你想要进行绝对定位的 div 的外层再包裹一层父级 div，然后给这个父级 div 设置一个 position: relative ，这样子 div 就可以根据这个父级 div 进行绝对定位了。

假设你的HTML结构如下：

1. <div class="parent">
2.   <div class="child">这是第一个div</div>
3. </div>
4. <div class="parent">
5.   <div class="child">这是第五个div</div>
6. </div>

复制代码

你可以这样设置你的CSS代码：

1. .parent {
2.   position: relative;
3. }
5. .child {
6.   position: absolute;
7.   top: 0;
8.   left: 0;
9. }

复制代码

在这段 CSS 代码中， .parent 元素被设为了 relative ，这样其子元素 .child （你的第一个和第五个 div）就可以根据父元素进行绝对定位了。然后 .child 元素被设定为 absolute ，通过 top: 0; 和 left: 0; 使其定位到父元素的左上角。你可以根据你的需要调整 top 和 left 的值来改变 .child 元素的位置。

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

the_ben

谢谢鱼币

花开半夏——

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

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

sfqxx

要在两个 `div` 上使用绝对定位，你需要确保它们的父元素设置了 `position: relative;`，以便它们能够相对于其父元素进行定位。同时，你需要指定 `top`, `right`, `bottom` 或 `left` 属性来确定 `div` 的具体位置。

以下是你可能需要的 CSS 代码：

1. .parent-div {
   
2.     position: relative;
   
3. }
   
4. 
   
5. .div-1,
   
6. .div-5 {
   
7.     position: absolute;
   
8.     /* 这里可以根据需要调整 top 和 left 的值 */
   
9.     top: 0;
   
10.     left: 0;
    
11. }
    
12. 
    
13. .div-1 {
    
14.     /* 这里可以根据你的图片和文字要求，调整这个 div 的宽度、高度、背景色等样式 */
    
15. }
    
16. 
    
17. .div-5 {
    
18.     /* 这里可以根据你的图片和文字要求，调整这个 div 的宽度、高度、背景色等样式 */
    
19.     /* 如果两个 div 是属于不同的父 div，并且你希望 .div-5 在页面上的位置与 .div-1 一样，可以调整 top 和 left 的值 */
    
20. }

复制代码

注意，一个绝对定位元素的位置相对于最近的已定位祖先（不是 `static` 的）计算。如果绝对定位元素没有已定位的祖先，那么它的位置相对于初始包含块。此外，一个绝对定位元素的 `margin` 不会与其他任何 `margin` 合并。

sfqxx_小

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

HTML:

1. <div class="wrapper">
   
2.   <div class="row">
   
3.     <div class="first-div">
   
4.       <!-- 第一个div的内容 -->
   
5.     </div>
   
6.     <div class="second-div">
   
7.       <!-- 第二个div的内容 -->
   
8.     </div>
   
9.     <div class="third-div">
   
10.       <!-- 第三个div的内容 -->
    
11.     </div>
    
12.     <div class="fourth-div">
    
13.       <!-- 第四个div的内容 -->
    
14.     </div>
    
15.   </div>
    
16.   <div class="row">
    
17.     <div class="fifth-div">
    
18.       <!-- 第五个div的内容 -->
    
19.     </div>
    
20.     <div class="sixth-div">
    
21.       <!-- 第六个div的内容 -->
    
22.     </div>
    
23.     <div class="seventh-div">
    
24.       <!-- 第七个div的内容 -->
    
25.     </div>
    
26.     <div class="eighth-div">
    
27.      <!-- 第八个div的内容 -->
    
28.     </div>
    
29.   </div>
    
30. </div>

复制代码

CSS:

1. .wrapper {
   
2.   position: relative; /* 声明为已定位元素的祖先元素 */
   
3. }
   
4. 
   
5. .first-div, .fifth-div {
   
6.   position: absolute;
   
7.   /* 根据需要进行定位，可以使用top、left、right、bottom等属性调整位置 */
   
8.   /* 例如： */
   
9.   top: 50px;
   
10. }
    
11. 
    
12. /* 其他div的样式和布局 */
    
13. .row {
    
14.   display: flex;
    
15. }
    
16. 
    
17. /* 假设每个div的宽度相等，可以根据实际情况进行调整 */
    
18. .first-div, .second-div, .third-div, .fourth-div,
    
19. .fifth-div, .sixth-div, .seventh-div, .eighth-div {
    
20.   width: 100px;
    
21. }

复制代码

请注意，示例中的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 属性来确定它们在父元素中的位置。

以下是一个简单的例子：

1. <div style="position: relative; height: 300px; width: 400px; background-image: url('your-image-url'); background-size: cover;">  
   
2.     <div style="position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: red;"></div>  
   
3.     <div style="position: absolute; top: 120px; left: 50px; width: 100px; height: 100px; background-color: blue;"></div>  
   
4.     <div style="position: absolute; top: 200px; left: 50px; width: 100px; height: 100px; background-color: green;"></div>  
   
5.     <div style="position: absolute; top: 50px; left: 200px; width: 100px; height: 100px; background-color: yellow;"></div>  
   
6.     <div style="position: absolute; top: 120px; left: 200px; width: 100px; height: 100px; background-color: purple;"></div>  
   
7.     <div style="position: absolute; top: 200px; left: 200px; width: 100px; height: 100px; background-color: orange;"></div>  
   
8. </div>

复制代码

在这个例子中，父元素设置了相对定位，并且设置了高度和宽度。然后，子元素（第一个和第五个 div）设置为绝对定位，并使用 top 和 left 属性来确定它们在父元素中的位置。你可以根据需要调整 top 和 left 的值来达到你想要的效果。

注意：在使用绝对定位时，需要确保父元素是相对定位或者绝对定位。否则，子元素将无法正确地相对于父元素进行定位。

花开半夏——

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

首先 ...

虽然不需要了，但是还是谢谢&#128591;