css定位-子绝父相

最新推荐文章于 2024-05-03 14:55:36 发布

weifeng_bushileng

最新推荐文章于 2024-05-03 14:55:36 发布

阅读量5.8k

点赞数 1

分类专栏： web 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_43733682/article/details/123216595

版权

web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

题目要求：在这里插入图片描述
开始的代码：

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="./index.css" />
  <title>优课达</title>
</head>
<body>
  <h1 class="title">MOUNTAIN</h1>
  <p>
    The Facebook post was heartfelt. We like our little town just as it is:
    Little. Homey. Just us’ns.
  </p>
  <div class="img-box">
    <img
      class="first"
      alt=""
      
      src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/1.jpg?x-oss-process=image/resize,h_300"
      />
      <div class="word">图片1</div>
       
    <img
      alt=""
      src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/2.jpg?x-oss-process=image/resize,h_300"
    />
    <div class="word">图片2</div>
   
    <img
      alt=""
      src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/3.jpg?x-oss-process=image/resize,h_300"
    />
    <div class="word">图片3</div>
    
    <img
      alt=""
      src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/4.jpg?x-oss-process=image/resize,h_300"
    />
    <div class="word">图片4</div>
  </div>
  <h2>LISTEN</h2>
  <p>
    Listen, I can empathize. As someone who’s lived in the Denver area since
    1971 — right about the time John Denver’s songs were enticing folks to move
  </p>
  <footer></footer>
</body>

body {
  margin: 0; /*去掉默认的样式*/
  font-family: Sans-serif;
  color: rgba(0, 0, 0, 0.84);
  font-size: 16px;
  padding: 30px;
}

img {
  width: 100%;
}
.img-box {
  position: relative;
}
.word {
  position: absolute;
  font-size: 20px;
  color: yellow;
  top: 10px;
  right: 10px;
}

对于第一张图显示是没有问题的，但是后面的不知道怎么去定位呢，从上面看，.img-box是所有的img图片的父级呀
于是用了最笨的办法就是，每个img图片外面都用一个<div
包裹，然后对每一个div进行规定，这样就可以实现了
改变后的代码为

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="./index.css" />
  <title>优课达</title>
</head>
<body>
  <h1 class="title">MOUNTAIN</h1>
  <p>
    The Facebook post was heartfelt. We like our little town just as it is:
    Little. Homey. Just us’ns.
  </p>
  <div class="img-box">
    <img
      class="first"
      alt=""
      
      src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/1.jpg?x-oss-process=image/resize,h_300"
      />
      <div class="word">图片1</div>
      </div>
     
  <div class="second">    
    <img
      alt=""
      src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/2.jpg?x-oss-process=image/resize,h_300"
    />
    <div class="word">图片2</div>
    </div>
    <div class="third">
    <img
      alt=""
      src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/3.jpg?x-oss-process=image/resize,h_300"
    />
    <div class="word">图片3</div>
    </div>
    <div class="four">
    <img
      alt=""
      src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/4.jpg?x-oss-process=image/resize,h_300"
    />
    <div class="word">图片4</div>
  </div>
  <h2>LISTEN</h2>
  <p>
    Listen, I can empathize. As someone who’s lived in the Denver area since
    1971 — right about the time John Denver’s songs were enticing folks to move
  </p>
  <footer></footer>
</body>

body {
  margin: 0; /*去掉默认的样式*/
  font-family: Sans-serif;
  color: rgba(0, 0, 0, 0.84);
  font-size: 16px;
  padding: 30px;
}

img {
  width: 100%;
}
.img-box {
  position: relative;
}
.second {
  position: relative;

}
.third { 
   position: relative;
  }
  .four{
    position: relative;
  }
.word {
  position: absolute;
  font-size: 20px;
  color: yellow;
  top: 10px;
  right: 10px;
}

效果图：
在这里插入图片描述

完美！！！！
总结

子绝父相

在绝大多数情况下，子元素的绝对定位都是相对于父元素定位

如果希望子元素相对于父元素进行定位，又不希望父元素脱标。常用的解决方案

父元素设置：position: relative
子元素设置：position: absolute

这样就可以，子与父一起挪动，用父进行定位。情况如下：

简称为子绝父相

position的总结：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hNFviKpv-1646141753429)(C:\Users\han\AppData\Roaming\Typora\typora-user-images\image-20220301193542690.png)]

定位元素：

position不为tatic的元素

position 默认为：tatic

当position是relative，fixed或者absolute的其中一值的时候

例如：

<div class="d1" style="position:relative"> 
  <div class="d2">
    <div class="d3">
    </div>
  </div>
</div>

在上面的代码中，d2就是定位元素，其余的默认全是tatic

d3要是想找他的定位元素就是d2

weifeng_bushileng

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
css定位-子绝父相

题目要求：开始的代码：<!DOCTYPE html><head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="./index.css" /> <title>优课达</title></head><body> <h1 class="title">MOUNTAIN</h1>
复制链接

扫一扫