CSS的定位和浮动

最新推荐文章于 2024-08-25 22:44:31 发布

verify.Mar

最新推荐文章于 2024-08-25 22:44:31 发布

阅读量1.4k

点赞数 51

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/2301_80227523/article/details/139193806

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

css的定位

CSS的定位属性有三种，分别是绝对定位，相对定位，固定定位

position: absolute; <!-- 绝对定位-->
position: relative; <!-- 相对定位-->
position：fixed; <!-- 固定定位 -->

相对定位

让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调)

举例

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>

	<style type="text/css">

		body{
			margin: 0px;
		}

		.div1{
			width: 200px;
			height: 200px;
			border: 1px solid red;
		}

		.div2{
			position: relative;/*相对定位：相对于自己原来的位置*/
			left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/
			top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/

			width: 200px;
			height: 200px;
			border: 1px solid red;
		}
	</style>
 </head>

 <body>

	<div class="div1">有生之年</div>
	<div class="div2">狭路相逢</div>

 </body>

</html>

相对位置不脱标

相对定位的用途

（1）微调元素

（2）做绝对定位的参考，子绝父相

相对位置的定位值

left: 盒子右移
right:左移
top:下移
bottom:上移

斜上斜下就是组合起来

绝对定位

绝对定位：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left，纵坐标用top或bottom表示

绝对定位脱标

绝对定位的盒子脱离了标准文档流。

所以，所有的标准文档流的性质，绝对定位之后就不遵守了

绝对定位之后，标签就不区分所谓的行内元素，块级元素了。不需要display:block就可以设置宽高了

绝对位置的参考点

(1)如果用top描述，那么参考点就是页面的左上角，而不是浏览器的左上角；

（2）如果右buottom描述，那么参考点就是浏览器首屏窗口尺寸，对应页面的左下角

以盒子为参考点

一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位，相对定位，还是固定定位)的元素，那么将以父辈这个元素为参考点

子绝父相

（1）要听最近已经定位的祖先元素，不一定是父亲，可能是爷爷

		<div class="box1">        相对定位
			<div class="box2">    没有定位
				<p></p>           绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
			</div>
		</div>

(2)不一定是相对定位，任何定位，都可以作为儿子的参考点

子绝父绝，子绝父相，子绝父固都可以给儿子定位的。但是在工程上，如果子绝，父绝没有一个盒子在标准流里面了，所有页面就不稳固，没有任何实战用途

子绝父相：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。

父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定距离

(3)绝对定位的儿子，无视参考的那个盒子的padding

下图，绿色部分是父亲div的padding，蓝色部分p是div的内容区域。此时，如果div相对定位，p绝对定位。那么p将无视父亲的padidng，在border内侧为参考点，进行定位

让绝对定位中的盒子在父亲里居中

如果想让一个标准流中的盒子在父亲里居中（水平方向来看）可以将其设置

margin: 0 auto属性

可如果盒子是绝对定位，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做o

	div {
		width: 600px;
		height: 60px;
		position: absolute;  绝对定位的盒子
		left: 50%;           首先，让左边线居中
		top: 0;
		margin-left: -300px;  然后，向左移动宽度（600px）的一半
	}

总结公式：

left:50%; margin-left:负的宽度的一半;

固定定位

就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。

备注：IE6不兼容

用途1:网页右下角的“返回到顶部”

	<style type="text/css">
		.backtop{
			position: fixed;
			bottom: 100px;
			right: 30px;
			width: 60px;
			height: 60px;
			background-color: gray;
			text-align: center;
			line-height:30px;
			color:white;
			text-decoration: none;   /*去掉超链接的下划线*/
		}
	</style>

用途2：顶部导航条

需要注意的是，假设顶部导航条的高度是60px，那么，为了防止其他内容被导航条覆盖，我们需要给body标签设置60px的padding-top；

实现如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
body{
			/*为什么要写这个？*/
			/*不希望我们的页面被nav挡住*/
			padding-top: 60px;
			/*IE6不兼容固定定位，所以这个padding没有什么用，就去掉就行了*/
			_padding-top:0;
		}
		.nav{
			position: fixed;
			top: 0;
			left: 0;
	 		width: 100%;
			height: 60px;
			background-color: #333;
			z-index: 99999999;
		}
		.inner_c{
			width: 1000px;
			height: 60px;
			margin: 0 auto;

		}
		.inner_c ul{
			list-style: none;
		}
		.inner_c ul li{
			float: left;
			width: 100px;
			height: 60px;
			text-align: center;
			line-height: 60px;
		}
		.inner_c ul li a{
			display: block;
			width: 100px;
			height: 60px;
			color:white;
			text-decoration: none;
		}
		.inner_c ul li a:hover{
			background-color: gold;
		}
		p{
			font-size: 30px;
		}
		.btn{
			display: block;
			width: 120px;
			height: 30px;
			background-color: orange;
			position: relative;
			top: 2px;
			left: 1px;
		}
	</style>
</head>
<body>
	<div class="nav">
		<div class="inner_c">
			<ul>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
			</ul>
		</div>
	</div>
</body>
</html>

z-index属性：

表示谁压着谁。数值大的压盖住数值小的。

以下特性

（1）属性值大的位于上层，属性值小的位于下层

（2）z-index值没有单位，就是一个正整数，默认z-index值是0；

（3）如果大家都没有z-index值，或者值相同。那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素能够压住没有定位的元素

（4）只要定位了的元素有z-index值。也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index值，而浮动的元素不能用

（5）从父现象：父亲怂，儿子再强也没有用。意思是，如果父亲1大于父亲2，即使儿子1小于儿子2，儿子1也能在最上层

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0px;
        }
        
        div{
            width: 100px;
            height: 100px;
        }

        #div2{
            position: absolute;
            left:100px;
            top:100px;
            background-color: green;
        }

        #div1{
            position: absolute;
            left: 50px;
            top:50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

当好几个已定位的标签出现覆盖的现象时，我们可以用这个z-index属性决定，谁处于最上方，也就是层级的应用。

图片来着github大佬，详情链接在隔壁贴

verify.Mar

关注

51
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
CSS的定位和浮动

需要注意的是，假设顶部导航条的高度是60px，那么，为了防止其他内容被导航条覆盖，我们需要给body标签设置60px的padding-top；子绝父绝，子绝父相，子绝父固都可以给儿子定位的。也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index值，而浮动的元素不能用。一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位，相对定位，还是固定定位)的元素，那么将以父辈这个元素为参考点。可如果盒子是绝对定位，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做o。
复制链接

扫一扫