鱼C论坛

 找回密码
 立即注册
查看: 1075|回复: 9

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

[复制链接]
发表于 2023-7-17 16:16:50 | 显示全部楼层 |阅读模式

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

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

x
两行div,每一行有四个div,第一个div和第五个div想用绝对定位的方法在图片上放三行文字
现在只能在第一个div上放文字,第五个放不了,想问一下第一个div绝对定位的前提下第五个div怎么绝对定位
可以给出第一个div和第五个div绝对定位的css代码 捕获3.PNG 捕获4.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 的值来达到你想要的效果。

注意:在使用绝对定位时,需要确保父元素是相对定位或者绝对定位。否则,子元素将无法正确地相对于父元素进行定位。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2023-7-17 16:17:09 | 显示全部楼层

回帖奖励 +6 鱼币

要实现第一个 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)来控制层叠顺序等。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-7-17 16:17:24 | 显示全部楼层

回帖奖励 +6 鱼币

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

这就是如何在同一父元素中进行多次绝对定位。希望这个解答对你有所帮助!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-7-17 16:22:48 | 显示全部楼层

回帖奖励 +6 鱼币

谢谢鱼币
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2023-7-17 16:24:13 | 显示全部楼层
isdkz 发表于 2023-7-17 16:17
确定如何正确地使用 CSS 的绝对定位,首先需要理解这个概念:当一个元素被设定为绝对定位时,它的位置是相 ...

是文字div和图片所在div即item类之间的绝对定位,想把文字放在固定位置,而且重复两个div,文字div距离父级div顶部为257px
不是8个小div定位
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-7-17 16:26:56 | 显示全部楼层

回帖奖励 +6 鱼币

要在两个 `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` 合并。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-7-17 16:30:40 | 显示全部楼层

回帖奖励 +6 鱼币

当使用绝对定位(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),您就可以在图片上放置三行文字了。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 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里居中
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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 的值来达到你想要的效果。

注意:在使用绝对定位时,需要确保父元素是相对定位或者绝对定位。否则,子元素将无法正确地相对于父元素进行定位。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2023-8-13 01:35:27 | 显示全部楼层
琅琊王朝 发表于 2023-7-30 22:26
如果你想在第一个 div 上放三行文字,同时在第五个 div 上放三行文字,你可以使用绝对定位来实现。

首先 ...

虽然不需要了,但是还是谢谢&#128591;
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-22 02:31

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表