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><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"><imgclass="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><imgalt=""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><imgalt=""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><imgalt=""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 since1971 — 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"><imgclass="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">    <imgalt=""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"><imgalt=""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"><imgalt=""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 since1971 — 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

css定位-子绝父相相关推荐

css定位(子绝父相)
定位 ☆定位核心 -- 子绝父相 1.1 在开发中什么时候需要使用定位? 定位就是解决标准流和浮动无法实现的效果. 1.2 「定位组成」定位 = 定位模式 + 边偏移定位模式:用于指定元素的定位方 ...
CSS定位—子绝父相
"子绝父相"是学习定位的口诀,这句话的意思是:子级是绝对定位的话,父级用相对定位. ①子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方. ②父盒子需要加定位限制子盒子在 ...
第6天-css笔记三大定位-定位子绝父相与精灵图
定位 ================================================================================= 用了子绝父相而带来的子盒子居中 ...
CSS中定位（带你实操代码掌握固定定位、绝对定位与相对定位（子绝父相））
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录固定定位绝 ...
CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级
文档流: 普通流(normal flow): 字面意思是普通流或者标准流,也就是常说的文档流,指网页内标签正常是从上到下,从左到右排列的意思,css的定位机制有3种:普通流(标准流).浮动.定位. 浮 ...
【CSS】定位--静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位
文章目录 1. 为什么需要 2. 定位组成定位 = 定位模式 + 边偏移 2.1 定位模式 2.2边偏移 3. 静态定位 static (了解) 4. 相对定位 relative (重要) 5. 绝 ...
Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解
前言持续学习总结输出中,今天分享的是Web前端,CSS常用之相对定位和绝对定位的区别,静态定位.子绝父相.固定定位.元素的层级关系的了解 1.定位的基本介绍我们的网页常见布局方式有:标准流.浮动. ...
一文读懂css【css3】绝对（absolute）定位和相对（relative）定位相对定位是相对谁定位的绝对定位又是根据谁绝对定位的子绝父相包含块
目录何为定位偏移量垂直方向 top bottom 水平方向 left right relative-相对定位何为相对定位相对定位的特点实例元素代码的起始位置元素若不开启相对定位,即便设 ...
CSS中的子绝父相布局
前言在CSS中有三种定位方式:相对定位.绝对定位和固定定位一.相对定位相对定位的属性是position:relative,如过对某个元素设置了相对定位,元素就会根据自身左顶点进行位置偏移,元素还 ...

css定位-子绝父相

子绝父相

css定位-子绝父相相关推荐

最新文章

热门文章