css定位-子绝父相
题目要求：
开始的代码：
"utf-8" />
"stylesheet" type="text/css" href="./index.css" />
优课达
"title">MOUNTAIN
The Facebook post was heartfelt. We like our little town just as it is:
Little. Homey. Just us’ns.
"img-box">
![]()
"first"
alt=""
src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/1.jpg?x-oss-process=image/resize,h_300"
/>
"word">图片1
![<span]()
""
src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/2.jpg?x-oss-process=image/resize,h_300"
/>
"word">图片2
![<span]()
""
src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/3.jpg?x-oss-process=image/resize,h_300"
/>
"word">图片3
![<span]()
""
src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/4.jpg?x-oss-process=image/resize,h_300"
/>
"word">图片4
LISTEN
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
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图片外面都用一个
改变后的代码为
"utf-8" />
"stylesheet" type="text/css" href="./index.css" />
优课达
"title">MOUNTAIN
The Facebook post was heartfelt. We like our little town just as it is:
Little. Homey. Just us’ns.
"img-box">
![]()
"first"
alt=""
src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/1.jpg?x-oss-process=image/resize,h_300"
/>
"word">图片1
"second">
![<span]()
""
src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/2.jpg?x-oss-process=image/resize,h_300"
/>
"word">图片2
"third">
![<span]()
""
src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/3.jpg?x-oss-process=image/resize,h_300"
/>
"word">图片3
"four">
![<span]()
""
src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/4.jpg?x-oss-process=image/resize,h_300"
/>
"word">图片4
LISTEN
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
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的其中一值的时候
例如：
"d1" style="position:relative">
"d2">
"d3">
在上面的代码中，d2就是定位元素，其余的默认全是tatic
d3要是想找他的定位元素就是d2