【CSS】position 定位 和 z-index 层级

文章目录

    • 相对定位:relative
    • 绝对定位:absolute
    • 固定定位:fixed
    • 粘性定位:sticky
    • 设置定位元素的层级:z-index

  • position属性用于指定一个元素在文档中的定位方式。
  • top,right,bottom 和 left 属性则决定了该元素的最终位置。

语法

 position:static/absolute/relative/fixed/sticky;

说明

  • static(默认值):
    元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。忽略任何top、bottom、left、right声明
  • absolute(绝对定位)
    相对于父级元素的绝对定位,浮出、脱离文档流,不占据空间,就是我们所说的层,其位置相对于最近的以定位父元素而言的位置,若父元素都没有定位,则以HTML(根元素)进行定位参考
  • relative(相对定位)
    相对于默认位置的偏移定位,通过设置left、top、right、bottom值可将其移至相对于其开始的位置发生位置上的移动,不会破坏正常的布局流
  • fixed(固定定位)
    相对于浏览器的绝对定位,不占位,是相对于浏览器窗口的指定坐标进行定位。不管窗口滚动与否,元素都会留在那个位置。无法和relative配合使用
  • sticky(粘性定位)
    相对于可视窗口定位,元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置

相对定位:relative

  • 相对定位的元素是在文档中的正常位置偏移给定的值,但是不影响其他元素的偏移。
  • 下面的例子中,注意未应用定位的其它元素是按照 “Two” 在正常位置的情况下进行布局的。
  • 示例:相对自身定位
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<style type="text/css">
		.box {
		  display: inline-block;
		  width: 100px;
		  height: 100px;
		  background: red;
		  color: white;
		}
		
		#two {
		  position: relative;
		  top: 20px;
		  left: 20px;
		  background: blue;
		}
	style>
	<body>
		<div class="box" id="one">Onediv>
		<div class="box" id="two">Twodiv>
		<div class="box" id="three">Threediv>
	body>
html>

【CSS】position 定位 和 z-index 层级_第1张图片

绝对定位:absolute

  • 相对定位的元素并未脱离文档流,而绝对定位的元素则脱离了文档流。
  • 在布置文档流中其它元素时,绝对定位元素不占据空间。
  • 绝对定位元素相对于最近的非 static 祖先元素(上一级设置定位的元素)定位。
  • 当这样的祖先元素不存在时,则相对于ICB(inital container block, 初始包含块)。
  • 默认状态下,html就是一个大的包含块,所有绝对定位的元素都是根据窗口来定位自己所处的位置
  • 示例:相对初始包含块定位
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<style type="text/css">
		.box {
		  display: inline-block;
		  width: 100px;
		  height: 100px;
		  background: red;
		  color: white;
		}
		#one {
		  margin-left: 50px;
		}
		#two {
		  position: absolute;
		  width: 50px;
		  height: 50px;
		  top: 0px;
		  left: 0px;
		  background: blue;
		}
	style>
	<body>
		<div class="box" id="one">
			One
			<div class="box" id="two">Twodiv>
		div>
	body>
html>

【CSS】position 定位 和 z-index 层级_第2张图片

  • 示例:相对已定位元素定位
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<style type="text/css">
		.box {
		  display: inline-block;
		  width: 100px;
		  height: 100px;
		  background: red;
		  color: white;
		}
		/* 已设置定位的祖先元素 */
		#one {
		  position: relative;
		  margin-left: 50px;
		}
		#two {
		  position: absolute;
		  width: 50px;
		  height: 50px;
		  top: 20px;
		  left: 20px;
		  background: blue;
		}
	style>
	<body>
		<div class="box" id="one">
			One
			<div class="box" id="two">Twodiv>
		div>
	body>
html>

【CSS】position 定位 和 z-index 层级_第3张图片

固定定位:fixed

  • 固定定位与绝对定位相似,但元素的包含块为 viewport 视口。
  • 该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。
  • 示例:
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<style type="text/css">
		.box {
		  display: inline-block;
		  width: 100px;
		  height: 100px;
		  background: red;
		  color: white;
		}
		#two {
		  position: fixed;
		  width: 50px;
		  height: 50px;
		  top: 0px;
		  right: 0px;
		  background: blue;
		}
	style>
	<body>
		<div class="box" id="two">Twodiv>
	body>
html>

【CSS】position 定位 和 z-index 层级_第4张图片【CSS】position 定位 和 z-index 层级_第5张图片
页面滚动时,位置相对于可视窗口保持不变

  • 示例:让一个元素始终在窗口水平、垂直位置居中
/*方法一*/
div{
	width:200px;
	height:200px;
	background:red;
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
}
/*方法二*/
div{
	width:200px;
	height:200px;
	background:red;
	position:fixed;
	left:50%;
	top:50%;
	margin-top:-100px;
	/*相对于减自身高度的一半,找高度的中心点*/
	margin-left:-100px;
	/*相对于减自身宽度的一半,找宽度的中心点*/
}

粘性定位:sticky

  • 粘性定位可以被认为是相对定位和固定定位的混合。
  • 元素在跨越特定阈值前为相对定位,之后为固定定位。
  • 须指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。
  • 否则其行为与相对定位相同
#one { position: sticky; top: 10px; }
/*
	在 viewport 视口滚动到元素 top 距离小于 10px 之前,元素为相对定位。
	之后,元素将固定在与顶部距离 10px 的位置,直到 viewport 视口回滚到阈值以下
*/
  • 示例:改变可视窗口的长度
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<style type="text/css">
		.box {
		  display: inline-block;
		  width: 100px;
		  height: 100px;
		  background: red;
		  color: white;
		}
		#one { 
		  margin-left: 50px;
		}
		#two {
		  display: block;
		  width: 50px;
		  height: 50px;
		  position: sticky;
		  bottom: 0px;
		  background: blue;
		}
	style>
	<body>
		<div class="box" id="one">
			One
		div>
		<div class="box" id="two">Twodiv>

	body>
html>

【CSS】position 定位 和 z-index 层级_第6张图片
【CSS】position 定位 和 z-index 层级_第7张图片

设置定位元素的层级:z-index

  • z-index 属性设置元素的堆叠顺序。
  • 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
  • Z-index 仅能在定位元素上奏效(例如 position:absolute;)!
  • 语法:
{
	z-index:auto | number;
}
  • 参数说明:
- auto:	默认值
- number:	无单位的整数值,可为负数,数值越大,层越靠上
  • 示例:
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<style type="text/css">
		div {
			margin-left: 100px;
			width: 50px;
			height: 75px;
			background: pink;
			position:absolute;
			left:0px;
			top:0px;
			z-index:-1
		}
	style>
	<body>
		<section>
			<h1>z-index 属性用法h1>
			<div>div>
			<p>z-index 默认值是 0,Z-index -1 拥有更低的优先级p>
			<script type="text/javascript">
			script>
	body>
html>

【CSS】position 定位 和 z-index 层级_第8张图片

  • 示例:
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<style type="text/css">
		div {
			margin-left: 100px;
			width: 50px;
			height: 75px;
			background: pink;
			position:absolute;
			left:0px;
			top:0px;
			z-index:1
		}
	style>
	<body>
		<section>
			<h1>z-index 属性用法h1>
			<div>div>
			<p>z-index 默认值是 0,Z-index 1 拥有更高的优先级p>
			<script type="text/javascript">
			script>
	body>
html>

【CSS】position 定位 和 z-index 层级_第9张图片

说明

  • 较大数值的对象会覆盖在较小数值的对象之上。
  • -如两个绝对定位的此属性值具有同样的number值,那么将根据他们在HTML文档中声明的顺序层叠。
  • 此属性仅仅作用于position属性值为 relative 或 absolute 的对象。

你可能感兴趣的:(CSS,笔记,relative,absolute,fixed,sticky,z-index)