题目要求：
开始的代码：
<!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