CSS定位position

最新推荐文章于 2024-06-17 17:26:11 发布

一麻袋小猫

最新推荐文章于 2024-06-17 17:26:11 发布

阅读量284

点赞数 1

文章标签： css html5

本文链接：https://blog.csdn.net/Zmongo/article/details/104112549

版权

浮动让多个div没有缝隙的水平排成一行
定位将盒子定在某一个位置自由的漂浮在其他盒子上面
三种布机制的上下顺序：标准流（海底）----浮动的盒子（海面）----定位的盒子（天空）
定位是用来布局的=定位模式+边偏移（凡是有定位的地方必须出边偏移->就是方位名词）
定位有四种定位模式：静态定位，相对定位，绝对定位，相对定位
静态定位：static ，相当于无定位的意思，是默认定位，相当于border里面的none.按照标准流的特性摆放位置，没有边偏移。要注意的是：静态布局几乎不用
相对定位是相对于它原来在标准流的位置来说的。然而有趣的是：相对定位的盒子，原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			/*margin: 100px;
			position: relative;
			top: 100px;
			left: 100px;*/
		}
		.two {
			background-color: purple;
			position: relative;
			top: 100px;
			left: 100px;
		}
		div
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
</body>
</html>

绝对定位：absolute
绝对定位是元素以带有定位的父级元素来移动位置（拼爹型）
绝对定位中如果父级没有定位，绝对定位子盒子以我们Document为准，以浏览器位置对齐。如果父亲有定位，那么绝对定位以父亲，或者爷爷或者其他祖先为准。
**绝对定位完全脱标，不保留位置。**很重要

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
    	.yeye {
			width: 500px;
			height: 500px;
			position: relative;
			background-color: blue;
	    }
		.father {
			width: 350px;
			height: 350px;
			background-color: pink;
			margin: 100px;
			/*外边距塌陷*/
			/*标准流的子盒子总是以父级为准移动位置*/
		}
		.son {
			width: 150px;
			height: 150px;
			background-color: purple;
			position: absolute;
			top: 50px;
			left: 50px;
		}
	</style>
</head>
<body>
	<div class="yeye">
	<div class="father">
		<div class="son"></div>
	</div>
	</div>
</body>
</html>

以上案例中最重要的是外边距塌陷问题。出现问题的时候恍惚了一下，后来想到是外边距塌陷问题，两个盒子垂直放置，此时父亲和孩子margin会出现外边距塌陷问题，谁大选谁。

此图中最重要的是外边距塌陷

子绝父相：父级要占有位置，所以要用相对定位，孩子要任意摆放，并且可以压住文字或图片，所以用绝对定位。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box {
			width: 310px;
			height: 190px;
			border: 1px solid #ccc;
			margin: 100px auto;
			padding: 10px;
			position: relative;
		}
		.top {
			position: absolute;
			top: 0;
			left: 0;
		}
		.bottom {
			position: absolute;
			bottom: 0;
			right: 0;
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="images/top_tu.gif" alt="" class="top">
		<!-- 不能用浮动，因为第一：浮动的盒子压不住图片和文字，第二：浮动的盒子压不住内外边距和边框 -->
		<img src="images/adv.jpg" alt="">
		<img src="images/br.gif" alt="" class="bottom">
	</div>
</body>
</html>

子绝父相的例子

固定定位 fixed 是一种特殊的绝对定位。

 1.完全脱标  2. 固定定位跟父亲没有关系，以浏览器的可视定位为基准点来对齐

3.做案例时，注意到圆角矩形可以设置四个角。但顺序呢必须一定：

border-top-right-radius: 15px;
			border-bottom-right-radius:15px;

如果4个角数值相同：border-radius: 15px;
如果四个角数值不同：border-radius: 左上角右上角右下角左下角；
上面则可以改成：

border-radius:0 15px 15px 0;

4.相同点很多时，要用并集选择器。还要注意的是 hover 不是仅仅只能用于a…竟然一直以为只能用于a标签，罪过罪过。
5. 要注意权重问题

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		li {
			list-style: none;
		}
		.taobao {
			width: 520px;
			height: 280px;
			background-color: pink;
			margin: 100px auto;
			position: relative;
		}
		.arr-l,
		.arr-r {
			position: absolute;
			top: 50%;
			/*left: 0;*/
			margin-top: -15px;
			width: 20px;
			height: 30px;
			line-height: 30px;
			color: white;
			/*border-top-right-radius: 15px;
			border-bottom-right-radius:15px;*/
			text-decoration: none;
			background: rgba(0,0,0,0.2);
		}
		.arr-l {
			left: 0;
			border-top-right-radius: 15px;
			border-bottom-right-radius:15px;
		}
		.arr-r {
			right: 0;
			border-top-left-radius: 15px;
			border-bottom-left-radius:15px;
			text-align: right;
		}
		.arr-l:hover,
		.arr-r:hover {
			background: rgba(0,0,0,0.4);
		}
		.circle {
			position: absolute;
			left: 50%;
			bottom: 15px;
			margin-left: -35px;
			width: 70px;
			height: 13px;
			background: rgba(255,255,255,0.3);
			border-radius: 7px;
		}
		.circle li {
			float: left;
			width: 8px;
			height: 8px;
			margin: 3px;
			border-radius: 50%;
			background-color: #fff;

		}

		/*不起作用，因为优先级********************* 样式冲突时，谁的权重高，用谁的样式
		.current {
			background-color: #f50000;
		}*/
		.circle .current {
			background-color: #f50000;
		}
	</style>
</head>
<body>
	<div class="taobao">
		<a href="#" class="arr-l"> < </a>
		<img src="images/taobao.jpg" alt="">
		<a href="#" class="arr-r"> > </a>
		<ul class="circle">
			<li></li>
			<li class="current"></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
</html>

为position综合案例，用到了权重问题

定位要注意：
1.绝对定位的盒子不能通过margin:auto居中对齐。相对定位可以，因为不脱标。
是绝对定位/固定定位居中的方法：让盒子移动50%再让盒子向相反方向移动它自身的一半。
2.堆叠顺序 z-index
定位：后来者居上。数值越大越靠前，只能是整数，小数无效果。只用于定位，因为定位会浮动出现叠罗汉的样式，此时用z-index就能决定谁先显示，以及显示的顺序。
3.定位改变display显示模式
行内块不给宽度就是默认的宽度就是内容的宽度，float和绝对定位(固定定位)能转化为行内块，所以在行内元素被设置为float和绝对定位时，不需要display直接加width和height就可以。
4.图片居中对齐用 text-align:center;
5.绝对定位和浮动不会触发外边距塌陷的问题，只有标准流会，所以解决外边距塌陷问题，除了用border和padding意外还有这两种。

在这里插入图片描述
网页布局总结

position结束！

一麻袋小猫

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS定位position

浮动让多个div没有缝隙的水平排成一行定位将盒子定在某一个位置自由的漂浮在其他盒子上面三种布机制的上下顺序：标准流（海底）----浮动的盒子（海面）----定位的盒子（天空）定位是用来布局的=定位模式+边偏移（凡是有定位的地方必须出边偏移->就是方位名词）定位有四种定位模式：静态定位，相对定位，绝对定位，相对定位静态定位：static ，相当于无定位的意思，是默认...
复制链接

扫一扫