前端基础-CSS定位

程序员文章站 2022-03-29 14:48:45

...

一、定位（重点）

定位的使用：

1.4种定位方式：静态、相对、绝对、固定

2.4种边偏移属性：left、right、top、bottom

注意：偏移值准确的理解是“距离什么位置有多少像素” 。如 top:100px; 距离顶部为100像素（向下走）

1.静态定位

所有标准流都是静态定位

语法：position:static

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			width:100px;
			height:100px;
			border:1px solid #000;
			position:static;/* 设置静态定位 */
			top:20px;/* 设置边偏移 */
		}
		.box1{
			width:200px;
			height:200px;
			background:#f00;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box1"></div>
</body>

效果图

总结：

1.工作中用的比较少，因为加了静态定位，元素也是标准流

2.偏移值对静态定位无效

使用场景：通常是将已经设置过定位的元素还原成标准流

我们以后所说的定位不包含静态定位

2.相对定位

相对于自身在标准流的位置进行定位移动

语法：position：relative

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			width:100px;
			height:100px;
			border:1px solid #000;
			position:relative;/* 设置相对定位 */
			top:20px;/* 设置边偏移 */
			left:30px;
		}
		.box1{
			width:200px;
			height:200px;
			background:#f00;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box1"></div>
</body>

效果图

总结：

1.相对定位参考自身在标准流中的位置进行偏移，移动的出发点是自身标准流的位置

2.不会对标准流的元素造成影响，没有脱离文档流，移动之后，自身在标准流中还占有空间，真正占得位置还是标准流的位置（灵魂不在肉体永驻）

3.可以盖在标准流的上方

使用场景：微调元素和配合绝对定位来实现效果

3.绝对定位

从父元素一直往上找设置过定位的直系父元素，作为自己的偏移参照物，找不到就继续往上找，直到html停止

语法：position:absolute

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			width:100px;
			height:100px;
			border:1px solid #000;
			position:absolute;/* 设置绝对定位 */
			top:20px;/* 设置边偏移 */
			left:30px;
		}
		.box1{
			width:200px;
			height:200px;
			background:#f00;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box1"></div>
</body>

效果图

总结：

1.偏移位置参考设置过定位（相对/绝对/固定）的直系父元素或直系祖宗元素，没找到就一直往上级找，直到html

2.会脱离标准流，不再继承父级的宽度（不论是块元素还是行元素，盒子的大小取决于其中内容），可以定义宽高，不占据标准流的空间

3.margin:auto对于设置过绝对定位的元素不起作用

4.设置方向偏移的时候，横向或者纵向只设置一个即可，设置多个没有意义

使用场景：配合相对定位使用（一般都会配合相对定位，但不是绝对的都是相对定位）

父相子绝

案例：

1.让盒子水平垂直居中（水平居中，垂直也居中）

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			width:100px;
			height:100px;
			border:1px solid #000;
			position:absolute;/* 设置绝对定位 */
			top:50%;/* 设置上边偏移 */
			margin-left:-50px;/* 往左边移动自身宽度的一般 */
			left:50%;/* 设置做边偏移 */
			margin-top:-50px;/* 往上面移动自身高度的一半 */
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>

效果图

2.图片上加logo

效果图示

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			width:290px;
			height:163px;
			position:relative;/* 父元素设置相对定位 */
		}
		.logo{
			width:52px;
			height:36px;
			background:url(2.png);
			position:absolute;/* 设置logo为绝对定位，父元素为相对定位，偏移位置相对父元素 */
			right:0;/* 最右边 */
			top:0;/* 最上面 */
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="1.gif" />
		<span class="logo"></span>
	</div>
	<div class="box">
		<img src="1.gif" />
		<span class="logo"></span>
	</div>
</body>

总结：父元素使用相对定位（不脱离标准流，写多个不会覆盖），子元素绝对定位（相对于父盒子的位置） —父相子绝

3.轮播图布局（以京东为例）

效果图示

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	.box{
		width:590px;
		height:470px;
		margin:0 auto;
		border:1px solid #000;	
		position:relative;/* 设置相对定位，因为左右按钮和下面的小圆点都需要在当前元素上面 */
	}
	ul,ol{
		list-style:none;
		padding:0;
		margin:0;
	}
	ul li{
		display:none;	
	}
	ul li.on{
		display:block;
	}
	ol{
		width:152px;
		height:18px;	
		position:absolute;/* 设置绝对定位，相对于父元素进行偏移 */
		left:46px;/* 左边偏移 */
		bottom:20px;/* 下面偏移 */
	}
	ol li{
		float:left;
		width:10px;
		height:10px;	
		border-radius:50%;
		border:1px solid #fff;
		margin:4px;
	}
	ol li.on{
		width:4px;
		height:4px;
		border:4px #999 solid;
		background:#fff;	
	}
	.box>a{
		text-decoration:none;
		color:#fff;
		background:#666;
		width:24px;
		height:40px;
		display:block;
		text-align:center;
		line-height:40px;
		position:absolute;/* 设置绝对定位，相对父元素进行偏移 */
		top:50%;/* 上边偏移 */
		margin-top:-20px;/* 向上移动自身高度的一半，已达到居中的效果 */
	}
	.box>a.left{
		left:0;	/* 左按钮左边偏移为0，在最左边 */
	}
	.box>a.right{
		right:0;	/* 右按钮右边偏移为0，在最右边 */
	}
</style>
</head>

<body>

<div class="box">
	<ul>
    	<li class="on"><a href="###"><img src="img/banner1.jpg" /></a></li>
    	<li><a href="###"><img src="img/banner2.jpg" /></a></li>
    	<li><a href="###"><img src="img/banner3.jpg" /></a></li>
    </ul>
    <ol>
    	<li class="on"></li>
    	<li></li>
    	<li></li>
    </ol>
    <a class="left" href="###">&lt;</a>
    <a class="right" href="###">&gt;</a>
</div>
</body>

4.固定定位

以浏览器作为参考进行偏移，且滚动条对固定定位无效

语法：position:fixed

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		.box{
			width:300px;
			height:200px;
			background:#abcdef;
			position:fixed;/* 设置固定定位，相对于浏览器窗口 */
			left:50%;
			top:50%;
			margin-left:-150px;
			margin-top:-100px;
		}
		.text{
			width:20px;
		}
	</style>
</head>
<body>
	<div class="text">
		日照香炉生紫烟，遥看瀑布挂前川。
		飞流直下三千尺，疑是银河落九天。
	</div>
	<div class="box"></div>
</body>

效果图

总结：

1.会脱离文档流，不占据标准流的空间

2.不继承父元素的宽高，需要给自身定义宽高

3.margin:auto对固定定位的元素不起作用

4.不会随着滚动条滚动，永远固定在浏览器窗口中的位置（移动的出发点：浏览器窗口，滚动条对设置了固定定位的元素无效）

使用场景：常用于网页右下角的“回到顶部”，或网站左右两侧的广告

案例：

京东最右侧的小列表

案例效果图

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	*{padding:0;margin:0;}
	.container{
		height:2000px;
		border-right:5px #7A6E6E solid;	
	}
	ul{
		list-style:none;
		padding:0;
		margin:0;	
		position:fixed;
		right:5px;
		top:50%;
		margin-top:-95px;
	}
</style>
</head>

<body>
<div class="container">
	<ul>
    	<li><a href="#"><img src="img/1.jpg" /></a></li>
    	<li><a href="#"><img src="img/2.jpg" /></a></li>
    	<li><a href="#"><img src="img/3.jpg" /></a></li>
    	<li><a href="#"><img src="img/4.jpg" /></a></li>
    	<li><a href="#"><img src="img/5.jpg" /></a></li>
    </ul>
</div>
</body>

四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位的父级移动位置
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置

5.定位元素的层叠效果

控制“定位”元素的叠放层级

语法：z-index:值

取值：

1.数字：

正数，数字越大，层级越高，离用户越近

负数，数字越小，层级越低，离用户越远

2.auto：（默认值）和父元素层级相同

3.正数比auto大，负数比auto小

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		/* 两个盒子都设置相对定位并偏移，中间有重叠的部分，默认后设置的会覆盖先设置的 */
		.box{
			width:100px;
			height:100px;
			background:#f00;
			position:relative;
			top:50px;
			z-index:2;/* 设置层叠高一点，会覆盖后设置的 */
		}
		.box1{
			width:200px;
			height:200px;
			background:#0f0;
			position:relative;
			left:50px;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box1"></div>
</body>

效果图

总结：

1.z-index只针对定位元素有效果（但不包括静态定位）

2.z-index值越大，层级越高

3.如果父元素已经比较过层级了（父元素“都有”z-index的时候，并且值不为auto），那么子元素与子元素之间是不会再去比较的

出题：上大盒子压住下大盒子，下大盒子里面的子元素压住上盒子

前端基础-CSS定位

一、定位（重点）

1.静态定位

2.相对定位

3.绝对定位

4.固定定位

5.定位元素的层叠效果

前端新人学习笔记-------html/css/js基础知识点（三） - 不穿裤子的衣服

CSS定位属性position_html/css_WEB-ITnose

css怎么设置相对定位和绝对定位

线上班前端（HTML5/CSS3）测试题

前端基础，表单、表格

前端基础，HTML5常用标签学习总结

css滤镜基础教程

div+css详解定位与定位应用

前端开发之CSS原理详解

基础的CSS3弹性盒Flexbox布局使用实例