（讲解6）定位

我还能再写两行

于 2020-05-18 11:35:40 发布

阅读量67

点赞数

分类专栏： 1+x

本文链接：https://blog.csdn.net/weixin_45929422/article/details/103300577

版权

1+x 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>css定位</title>
	<meta charset="utf-8">
	<style>
		body,p{
			margin:0;
			padding:0;
		}
		.box{
			position: relative;
			width: 400px;
			height:200px;
		}
		.box img{
			width: 100%;
			height: 100%;
		}
		.box p{
			position: absolute;
			left:0;
			bottom:0;
			width: 100%;
			height: 50px;
			line-height: 50px;
			color:#fff;
			background-color: rgba(0,0,0,0.7);
		}
	</style>
</head>
<body>

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

<div class="box">
	<img src="img/banner.png">
	<p>这里是标题</p>
</div>

<!-- 
	相对定位知识点不能理解，绝对定位相对来说要难理解一点，注意要讲解清楚有绝对定位属性的元素会逐层向上查找有定位元素的前辈元素。
	不要说父元素，容易误解只依据父辈元素定位。

	再有：定位属性使用的场景。比如联级菜单，比如放大镜效果等，只要是元素需要依据前辈元素来确定自己位置的都可以给前辈元素添加相对定位，
	给当前元素添加绝对定位。 再有注意即使没有偏移，也要添加一个top:0;left:0  明确位置。

	z-index 这个层级设置在有元素叠加的时候可以设置。可以使用火狐的3D动画插件动态的看一下元素层叠效果。


	教师在讲固定定位的时候可以看一下京东  淘宝等网站，侧边栏、返回到头部按钮等都是固定在某个位置，加深理解，实际做一下效果更好。
 -->



相对定位（相对于原位置）
	1.需要设置 position:relative（相对定位），
	2.它通过 left、right、top、bottom 属性确定元素在正常文档流中的偏移位置。
	3.相对于原位置移动，移动的方向和幅度由 left、right、top、bottom 属性确定，偏移前的位置保留不动。
	4.z-index 层级设置

绝对定位（相对于父类）
	1.需要设置 position:absolute(绝对定位)，这条语句的作用将元素从文档流中拖出来
	2.使用 left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
	3.如果不存在这样的包含块，则相对于 body元素，即相对于浏览器窗口。
	4.z-index 层级设置

固定定位（相对于网页窗口）
	与 absolute 定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，
	除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位
的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed 属性功能相同。
	4.z-index 层级设置
</body>
</html>

我还能再写两行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（讲解6）定位

<!DOCTYPE html><html><head> <title>css定位</title> <meta charset="utf-8"> <style> body,p{ margin:0; padding:0; } .box{ position: relative; ...
复制链接

扫一扫