CSS-定位【看这一篇就够了】

是洋洋a

于 2024-09-01 13:11:37 发布

阅读量424

点赞数 10

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

本文链接：https://blog.csdn.net/zheshiyangyang/article/details/141778009

版权

前端同时被 3 个专栏收录

43 篇文章 0 订阅

订阅专栏

CSS

22 篇文章 1 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

定位

属性值	描述
static	没有定位，元素出现在正常的流中(默认值)
relative	相对定位，相对于自身正常位置进行位置的调整
absolute	绝对定位，相对于其最近的定位的父元素定位，进行位置调整
fixed	固定定位相对于浏览器窗口进行位置调整
sticky	粘性定位基于用户的滚动位置进行定位

相对定位

盒子可以“相对自己原来的位置”进行位置调整，称之为“相对定位”

给需要添加相对定位的元素，加上“position:relative;”
元素的位置通过：“left”、“top”、“right”、“bottom”属性进行调整
属性值可以是正数，也可以是负数

定位的位置属性描述
top 向下移动
bottom 向上移动
left 向右移动
right 向左移动
值为负数 往规定方向移动

定位的位置属性	描述
top	向下移动
bottom	向上移动
left	向右移动
right	向左移动
值为负数	往规定方向移动

相对定位的特点

相对定位的元素，会在“老家留坑”，本质上仍然是在原来的位置，即：“元素的初始位置占据的空间会被保留”
只不过渲染在新的地方而已，渲染的图形可以比喻成影子，不会对其他页面元素产生任何影响

相对定位前后对比

<style type="text/css">
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    float: left;
  }
  .box2 {
    background-color: pink;
  }
  .box2 {
    /* 相对定位 */
    position: relative;
    /* 右偏移 20px */
    left: 20px;
    /* 下偏移20px */
    top: 20px;
  }
</style>
<body>
  <div class="box box1">box1</div>
  <div class="box box2">box2</div>
  <div class="box box3">box3</div>
</body>

效果：

未设置相对定位前效果	设置相对定位后效果

绝对定位的应用场景

1.鼠标滑动到元素，元素少量位置偏移动画

<style>
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 480px;
    margin: 150px auto;
  }
  ul li {
    width: 100px;
    height: 120px;
    background-color: pink;
    margin: 0px 10px;
    float: left;
  }
  /* 
        鼠标滑动到li上，li设置为相对定位
        然后相对自身向上偏移10px
        向右偏移2px 
    */
  ul li:hover {
    position: relative;
    top: -10px;
    left: 2px;
  }
</style>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</body>

效果：

2.网站导航

<style>
  body,
  ul,
  li {
    margin: 0;
    padding: 0;
  }
  a {
    text-decoration: none;
    color: #fff;
  }
  ul {
    height: 50px;
    margin-top: 50px;
    list-style: none;
    background-color: skyblue;
  }
  ul li {
    float: left;
    line-height: 50px;
  }
  ul li a {
    display: inline-block;
    padding: 0px 20px;
    height: 50px;
  }
  ul li a:hover {
    /* 相对定位，用来微调元素的位置 */
    position: relative;
    top: -5px;
    height: 60px;
    line-height: 60px;
    background-color: rgb(24, 181, 243);
  }
</style>
<body>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">信息</a></li>
    <li><a href="#">前端</a></li>
    <li><a href="#">Java架构师</a></li>
    <li><a href="#">实战</a></li>
    <li><a href="#">我们</a></li>
  </ul>
</body>

效果：

绝对定位

盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置

给需要添加绝对位置的元素，加上：“position:absolute;”
元素的位置通过：“left”、“top”、“right”、“bottom”属性进行调整位置
属性值可以使正数，也可以是负数

定位的位置属性描述
top
到上边的距离

bottom 到下边的距离
left 到左边的距离
right 到右边的距离

定位的位置属性	描述
top	到上边的距离
bottom	到下边的距离
left	到左边的距离
right	到右边的距离

/* 在不设置相对于谁定位时，默认相对浏览器的（0,0）坐标进行绝对定位 */
position: absolute;
top: 100px;
left: 100px;

绝对定位元素的8大特性

绝对定位的元素，相对离自己最近的最近的定位父元素进行位置调整
如果没有定位的父元素，则相对body进行位置调整
元素完全脱离文档流，释放其原本所占据的空间
元素的层级提升，会覆盖在其它元素上
行内元素加上定位后吗，会具有行内块元素特性，支持宽高设置
margin:auto;居中失效
定位元素未设置宽高情况下，同时设置top和bottom会改变元素高，同时设置left和right会改变元素宽
在元素调整宽高情况下，同时设置top与bottom，会与top值为主，bottom不生效，同时设置left和right则以left为主，right不生效

绝对定位脱离标准的文档流

绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖
脱离标注文档流的方法：“浮动”、“绝对定位”、“固定定位”
使用绝对定位的元素将会是一种漂浮状态

<style>
  .box1 {
    width: 200px;
    height: 200px;
    background-color: orange;
  }

  .box2 {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    /* 绝对定位 */
    position: absolute;
    top: 200px;
    left: 300px;
  }

  .box3 {
    width: 200px;
    height: 200px;
    background-color: tomato;
  }
</style>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</body>

效果：

脱离文档流，层级提升

<style>
  .container {
    width: 300px;
    height: 100px;
    border: 2px solid red;
    margin: 100px auto;
    /* 相对定位，是.box2绝对定位的参考对象 */
    position: relative;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    float: left;
  }
  .box3 {
    background-color: khaki;
  }
  .box2 {
    background-color: pink;
    /* 绝对定位 */
    position: absolute;
    /* 与.container元素左边距离为 10px */
    left: 10px;
    /* 与.container元素上边距离50px */
    top: 50px;
  }
</style>
<body>
  <div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
  </div>
</body>

.box2未绝对定位前效果	.box2绝对定位后效果

相对于其最近的定位的父元素进行定位

父元素未定位，祖先元素定位绝对定位相对于定位的祖先元素定位

<style>
  .container {
    width: 200px;
    height: 200px;
    border: 2px solid red;
    margin: 100px auto;
    /* 相对定位，是.box2绝对定位的参考对象 */
    position: relative;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    margin-top: 100px;
  }
  .item {
    width: 50px;
    height: 50px;
    background-color: pink;
    /* 绝对定位 */
    position: absolute;
    /* 与.container元素左边距离为 10px */
    left: 10px;
    /* 与.container元素上边距离50px */
    top: 10px;
  }
</style>
<body>
  <div class="container">
    <div class="box">
      <div class="item"></div>
    </div>
  </div>
</body>

.item未使用绝对定位前效果	.item使用绝对定位后效果

父元素及其祖先元素都未定位，则相对于body定位

<style>
  .container {
    width: 200px;
    height: 200px;
    border: 2px solid red;
    margin: 100px auto;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    margin-top: 100px;
  }
  .item {
    width: 50px;
    height: 50px;
    background-color: pink;
    /* 绝对定位 其父元素和祖先元素都未设置定位，则其相对body定位 */
    position: absolute;
    /* 与body左边距离为 10px */
    left: 10px;
    /* 与body上边距离10px */
    top: 10px;
  }
</style>
<body>
  <div class="container">
    <div class="box">
      <div class="item"></div>
    </div>
  </div>
</body>

.item未使用定位前效果	.item使用绝对定位后效果

行内元素绝对定位后，具有行内块元素特性

<style>
  span {
    /* 行内元素加上绝对定位后，支持宽高设置 */
    width: 200px;
    height: 100px;
    background-color: red;
    /* 绝对定位 */
    position: absolute;
    /* 上偏移50px */
    top: 50px;
    /* 左偏移 */
    left: 50px;
  }
</style>
<body>
  <span></span>
</body>

效果：

margin:0 auto水平居中失效

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: skyblue;
  }
  .item {
    width: 100px;
    height: 100px;
    background-color: khaki;
    /* 元素绝对定位 */
    position: absolute;
    /* 元素绝对定位后，margin:0 auto;水平居中失效 */
    margin: 0 auto;
  }
</style>
<body>
  <div class="box">
    <div class="item"></div>
  </div>
</body>

效果：

top与bottom及left与right同时设置，调节宽高

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    /* 相对定位 */
    position: relative;
  }
  .item {
    background-color: khaki;
    /* 元素绝对定位 */
    position: absolute;
    /* 
            通过以下值，元素会被自动拉宽和拉高，
            与相对定位元素上下 左右 10px间距 
        */
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
  }
</style>
<body>
  <div class="box">
    <div class="item"></div>
  </div>
</body>

效果：

top与bottom及left与right的优先级

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    /* 相对定位 */
    position: relative;
  }
  .item {
    width: 50px;
    height: 50px;
    background-color: khaki;
    /* 元素绝对定位 */
    position: absolute;
    /* 
        通过以下值，元素会被自动拉宽和拉高，
        与相对定位元素上下 左右 5px间距 
        */
    top: 50px;
    bottom: 10px;
    left: 50px;
    right: 10px;
  }
</style>
<body>
  <div class="box">
    <div class="item"></div>
  </div>
</body>

效果：

绝对定位的盒子垂直水平居中

绝对定位的盒子垂直居中是一个非常实用的技术

/* 垂直居中 */
position: absolute;
top: 50%;
margin-top: -自己高度一半;

/* 水平居中 */
position: absolute;
left: 50%;
margin-left: -自己宽度一半;

绝对定位的应用

绝对定位实现黑色半透明遮罩层

<!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>
		.container{
			width: 150px;
			height: 200px;
			margin: 100px auto;
			position: relative;
		}
		.container img {
			width: 150px;
			height: 200px;
		}
		.container::before {
			display: none;
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);;
		}
		.container .play-layer {
			position: absolute;
			display: block;
			width: 80px;
			height: 80px;
			background: url("/static/play.png") no-repeat center;
			background-size: cover;
			top: 50px;
			left: 40px;
			display: none;
		}
		.container:hover::before {
			display: block;
		}
		.container:hover .play-layer{
			display: block;
		}
	</style>
</head>
<body>
	<div class="container">
		<img src="/static/jjy.png" alt="">
		<span class="play-layer"></span>
	</div>
</body>
</html>

效果：

绝对定位实现带三角形的会话框

<!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>
		.container {
			position: relative;
			width: 150px;
			height: 200px;
			margin: 100px auto;
		}
		.container img {
			width: 150px;
			height: 200px;
		}
		.text {
			position: absolute;
			width: 200px;
			height: 100px;
			background-color: skyblue;
			left: 180px;
			top: 50px;
			border-radius: 20px;
			text-align: center;
			line-height: 100px;
			display: none;
		}
		.text::before {
			display: block;
			position: absolute;
			content: "";
			width: 0px;
			border: 20px solid transparent;
			border-right-color: skyblue;
			left: -40px;
			top: 25px;
		}
		.container:hover .text{
			display: block;
		}
	</style>
</head>
<body>
	<div class="container">
		<img src="/static/jjy.png" alt="">
		<div class="text">大家好，我是鞠婧祎~</div>
	</div>
</body>
</html>

效果：

固定定位

给需要添加固定定位的元素，加上“position:fixed;”
元素的位置通过：“left”、“top”、“right”、“bottom”属性进行调整，属性可以是正数也可以是负数

position: fixed;
top: 100px;
left: 100px;

注：

固定定位只能以整个页面为参考点（浏览器窗口）
固定定位托定标准文档流
除其位置是相对于浏览器窗口而言外，其它与绝对定位的特性一致

<style>
  body {
    height: 2000px;
  }
  .item {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 固定定位 */
    position: fixed;
    /* 与浏览器顶部100px */
    top: 100px;
    /* 与浏览器右边10px */
    right: 10px;
  }
</style>
<body>
  <div class="item"></div>
</body>

固定定位应用场景

固定定位实现返回顶部

<style>
  body {
    /* 为演示有滚动条的效果，给body设置高度 */
    height: 2000px;
  }
  .top {
    display: block;
    width: 60px;
    height: 50px;
    background-color: rgb(151, 148, 148);
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
    /* 固定定位 */
    position: fixed;
    bottom: 100px;
    right: 20px;
  }
  .top:hover {
    background-color: gold;
  }
</style>
<body>
  <a href="#" class="top"> 返回顶部 </a>
</body>

效果：

左右固定，中间自适应布局

<style>
  body {
    margin: 0;
  }
  .left {
    width: 200px;
    /* 固定定位 */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: skyblue;
  }
  .right {
    width: 150px;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: khaki;
  }
  .main {
    margin: 0 160px 0px 210px;
    background-color: tomato;
    min-height: 700px;
  }
</style>
<body>
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</body>

粘性定位

给需要添加粘性定位的元素，加上“position:sticky;”
粘性定位可以看做是“相对定位”与“固定定位”的混合产物（这里的固定定位，并不是我们上面说的position:fixed;只是有相似点）
当滚动高度小于元素所在位置时，元素以相对定位呈现
当滚动高度大于元素所在位置时，元素以固定定位呈现
当滚动高度大于（元素的父元素底部与浏览器高）时，元素相对于父元素定位一起移走
粘性定位相对离他最近的一个拥有“滚动机制”的祖先元素（当该祖先的overflow是hidden、scroll、auto或overlay时）定位或直接块级父元素定位

固定在离自己最近的拥有“滚动机制的祖先上”

当父元素没有滚动条：

<style>
  body {
    margin: 0;
    height: 2000px;
  }
  .top {
    height: 100px;
    background-color: pink;
  }
  .main {
    width: 1000px;
    margin: 20px auto;
    /* 这里的高度一定要大于.head元素的高度，否则看不到粘性定位效果 */
    height: 700px;
    background-color: salmon;
  }
  .head {
    height: 200px;
    background-color: rgb(240, 230, 140, 0.5);
    /* 粘性定位 */
    position: sticky;
    top: 0px;
  }
</style>
<body>
  <div class="top"></div>
  <div class="main">
    <!-- 粘性定位的元素 -->
    <div class="head"></div>
  </div>
</body>

效果：

元素的父级拥有“滚动机制”

当父级元素有滚动条时，元素一直固定在父级元素的最顶部

<style>
  body {
    margin: 0;
    height: 2000px;
  }
  .top {
    height: 100px;
    background-color: pink;
  }
  .main {
    width: 500px;
    margin: 20px auto;
    height: 300px;
    overflow: auto;
  }
  .head {
    height: 200px;
    background-color: rgb(240, 230, 140, 0.5);
    /* 粘性定位 */
    position: sticky;
    top: 0px;
  }
  .con {
    height: 700px;
    background-color: skyblue;
  }
</style>
<body>
  <div class="top"></div>
  <div class="main">
    <div class="head">111</div>
    <div class="con">222</div>
  </div>
</body>

效果：

粘性定位应用场景

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>
		.container {
			width: 500px;
			height: 300px;
			overflow-y: scroll;
		}
		dl dt {
			font-size: 20px;
			height: 30px;
			background-color: rgb(255, 192, 203);
			position: sticky;
			top: 0;
		}
		dl dd {
			line-height: 30px;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<div class="container">
		<dl>
			<dt>A</dt>
			<dd>Andrew W.K.</dd>
			<dd>Apparat</dd>
			<dd>Arcade Fire</dd>
			<dd>Apple</dd>
			<dd>Apparent</dd>
		</dl>
		<dl>
			<dt>B</dt>
			<dd>Banana</dd>
			<dd>Ban</dd>
			<dd>Buy</dd>
			<dd>Bad</dd>
			<dd>Binary</dd>
		</dl>
		<dl>
			<dt>C</dt>
			<dd>Christmas</dd>
			<dd>Cheer</dd>
			<dd>Chemistry</dd>
			<dd>China</dd>
			<dd>chorom</dd>
		</dl>
	</div>
</body>
</html>

效果：

2.表格首行冻结

<style>
  .box {
    width: 500px;
    height: 200px;
    /* y轴方向溢出，显示滚动条 */
    overflow-y: scroll;
  }
  table {
    width: 100%;
    /* 合并单元格边框线 */
    border-collapse: collapse;
  }
  table tr td,
  table tr th {
    border: 1px solid #ddd;
  }
  table tr th {
    background-color: skyblue;
    height: 50px;
    /* 表格首行冻结 */
    position: sticky;
    top: 0;
  }
  table tr td {
    font-size: 16px;
    text-align: center;
    height: 40px;
  }
</style>
<body>
  <div class="box">
    <table>
      <tr>
        <th>姓名</th>
        <th>学号</th>
        <th>成绩</th>
        <th>排名</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>0001</td>
        <td>90</td>
        <td>1</td>
      </tr>
      <tr>
        <td>张四</td>
        <td>0002</td>
        <td>80</td>
        <td>2</td>
      </tr>
      <tr>
        <td>张五</td>
        <td>0003</td>
        <td>77</td>
        <td>3</td>
      </tr>
      <tr>
        <td>张六</td>
        <td>0004</td>
        <td>70</td>
        <td>4</td>
      </tr>

      <tr>
        <td>张七</td>
        <td>0005</td>
        <td>67</td>
        <td>5</td>
      </tr>
      <tr>
        <td>张八</td>
        <td>0006</td>
        <td>65</td>
        <td>6</td>
      </tr>
    </table>
  </div>
</body>

效果：

总结

定位类型	描述	应用场景
相对定位 relative	相对自身原来的位置定位，占着原来的位置	微调元素的位置，但还占据原来空间只想提元升素的层级，但还是占原来的空间
绝对定位 absolute	相对离自己最近的定位的父元素定位，原来的位置被释放，相当于悬浮在页面中，会覆盖在其它元素的上面显示	一个元素想覆盖在另一个元素上面配合 JS 来实现动画效果
固定定位 fixed	相对浏览器窗口进行定位	你想让一个元素相对浏览器的位置一直不动
粘性定位 sticky	相对离自己最近的拥有滚动机制的父元素定位，或（直接父元素定位）	吸附效，冻结效果

是洋洋a

关注

10
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS-定位【看这一篇就够了】

定位类型描述应用场景相对定位 relative相对自身原来的位置定位，占着原来的位置微调元素的位置，但还占据原来空间只想提元升素的层级，但还是占原来的空间绝对定位 absolute相对离自己最近的定位的父元素定位，原来的位置被释放，相当于悬浮在页面中，会覆盖在其它元素的上面显示一个元素想覆盖在另一个元素上面配合 JS 来实现动画效果固定定位 fixed相对浏览器窗口进行定位你想让一个元素相对浏览器的位置一直不动粘性定位 sticky。
复制链接

扫一扫