CSS定位属性用CSS定位属性精确控制你的网页布局！

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

有些时候

为了看到光明

你必须冒险闯入黑暗之中

- 2024.03.29 -

CSS定位属性是用于控制网页中元素位置的一种方式，它能够让元素在页面上精准地落在我们想要的位置。

在CSS中，定位（Positioning）是控制元素在页面上如何定位和显示的一种机制。它主要包括四种属性：静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）。

每种定位方式都有其独特的特点和使用场景，下面将分别介绍这几种定位属性。

一、Static（静态定位）

静态定位是元素的默认定位方式，元素按照正常的文档流进行排列。在静态定位状态下，不能配合top、bottom、left、right来改变元素的位置。

可以用于取消元素之前的定位设置。

代码示例：

<!DOCTYPE html>
<html>
<head>
<style>
.static {
background-color: lightblue;
padding: 100px;
}
</style>
</head>
<body>

<div>这是一个静态定位的元素。</div>

</body>
</html>

二、Fixed（固定定位）

固定定位使元素相对于浏览器窗口进行定位，即使页面滚动，元素也会保持在固定的位置。

固定定位的元素会脱离正常的文档流。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
/* 给整个页面设置高度，出滚动条以便观察 */
height: 5000px;
}
div{
width: 100px;
height: 100px;
background-color: blue;
/* 固定定位 */
position: fixed;
right: 100px;
bottom: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

运行结果：

移动前

移动后

比如我们经常看到的网页右下角显示的“返回到顶部”，就可以用固定定位来实现。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
position: relative;
}
.content {
/* 页面内容样式 */
}
#backToTop {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #333;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body style="height: 5000px;">
<div>
</div>
<button id="backToTop" onclick="scrollToTop()">返回顶部</button>
<script>
function scrollToTop() {
window.scrollTo({top: 0, behavior: 'smooth'});
}
</script>
</body>
</html>

运行结果：

三、Relative（相对定位）

相对定位是将元素对于它在标准流中的位置进行定位，通过设置边移属性top、bottom、left、right，使指定元素相对于其正常位置进行偏移。如果没有定位偏移量，对元素本身没有任何影响。

不使元素脱离文档流，空间会保留，不影响其他布局。

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:200px;
height:100px;
background:skyblue;
margin:10px;
}
.box2{
width:200px;
height:100px;
background:pink;
margin:10px;
position:relative;/*相对定位*/
left:100px;/*向右偏移100px*/
top:-50px;/*向上偏移50px*/
}
.box3{
width:200px;
height:100px;
background:yellowgreen;
margin:10px;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>

运行结果：

没使用相对定位之前是这样的：

使用相对定位后：相对于原来的位置向右偏移了100px，向上偏移50px。

虽然它的位置发生了变化，但它在标准文档流中的原位置依然保留。

四、Absolute（绝对定位）

绝对定位使元素相对于最近的非 static 定位祖先元素进行定位。如果没有这样的元素，则相对于初始包含块（initial containing block）。绝对定位的元素会脱离正常的文档流。

如果该元素为内联元素，则会变成块级元素，可直接设置其宽和高的值（让内联具备快特性）；
如果该元素为块级元素，使其宽度根据内容决定。（让块具备内联的特性）

<style>
.wrap{
width:500px;
height:400px;
border: 2px solid red;
}
.box1{
width:200px;
height:100px;
background:skyblue;
margin:10px;
}
.box2{
width:200px;
height:100px;
background:pink;
margin:10px;
position:absolute;/*绝对定位*/
left:100px;/*向右偏移100px*/
top:30px;/*向下偏移30px*/
}
.box3{
width:200px;
height:100px;
background:yellowgreen;
margin:10px;

}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>

将第二个设置为绝对定位后，它脱离了文档流可以定位到页面的任何地方，在标准文档流中的原有位置会空出来，所以第三个会排到第一个下面。

第二个相对于它的父元素向右偏移100，向下偏移30。

想要快速入门前端开发吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！点这里前往学习哦！云端源想

五、z-index（层级顺序的改变）

层叠顺序决定了元素之间的堆叠顺序。z-index 属性用于设置元素的层叠顺序。具有较高 z-index 值的元素会覆盖具有较低 z-index 值的元素。

注意：

默认值是0
数值越大层越靠上
不带单位
没有最大值和最小值
可以给负数

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div:nth-of-type(1){
width: 300px;
height: 300px;
background-color: skyblue;
position: absolute;
}
div:nth-of-type(2){
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
}
div:nth-of-type(3){
width: 100px;
height: 100px;
background-color: yellowgreen;
position: absolute;
z-index: -1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>

</body>
</html>

运行结果：

可以看到，最后一个div依然存在，但是看不见了，原因就是我们改变了z-index属性值。

以上就是CSS定位属性的介绍了，通过这些定位属性，可以灵活地控制网页中元素的位置和堆叠顺序。

在实际应用中，CSS定位属性的使用需要考虑到整体布局和用户体验。合理运用这些定位技巧，可以让你的网页不仅美观，而且易于使用和维护。记住，好的设计总是细节和功能的完美结合。

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

言

有时候，我们想阅读页面中某段精彩的内容，但由于页面太长，用户需要自己滚动页面，查找起来非常麻烦，很容易让人失去继续往下阅读的兴趣。这样体验非常不好，所以我们可以想办法实现点击某段文字或者图片跳转到页面指定位置，方便用户的阅读。

一、纯 html 实现

1. 利用 id 为标记的锚点

这里作为锚点的标签可以是任意元素。

  <a href="#aa">跳转到 id 为 aa 标记的锚点</a>
  <p>-------------分隔线-------------</p>
  <div id="aa">a</div>

2. 利用 a 标签的 name 属性作为锚点

这里作为锚点的标签只能是 a 标签。

  <a href="#bb" >跳转到 name 为 bb 的 a 标签锚点</a>
  <p>-------------分隔线-------------</p>
  <a name="bb">name 为 bb 的 a 标签的锚点</a>
  <div id="abb">bbb</div>

注意：当以 ' a 标签 name 属性作为锚点 ' 和 ' 利用 id 为标记的锚点 ' 同时出现（即以 name 为锚点和以 id 为锚点名字相同时），会将后者作为锚点。

二、 js 实现

1. 利用 scrollTo()

window.scrollTo 滚动到文档中的某个坐标。可提供滑动效果，想具体了解 scrollTo() 可以看看 MDN 中的介绍。

话不多说，看下面代码

「html 部分」:

  <a id="linkc">平滑滚动到 c</a>
  <p>-------------分隔线-------------</p>
  <div id="cc">c</div>

「js 部分」:

  var linkc = document.querySelector('#linkc')
  var cc = document.querySelector('#cc')

  function to(toEl) {
    // toEl 为指定跳转到该位置的DOM节点
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    
    // 计算该 DOM 节点到 body 顶部距离
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)
    
    // 滚动到指定位置
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

2. 利用 scrollIntoView()

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。想具体了解 scrollIntoView() 可以看看 MDN 中的介绍。

下面也直接上代码

「html 部分」:

  <a onclick="goTo()">利用 scrollIntoView 跳转到 d</a>
  <p>-------------分隔线-------------</p>
  <div id="dd">ddd</div>

「js 部分」:

  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }

注意：此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

下面为了方便看效果，把上面的代码整理在一起。

<!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>
    div {
      width: 600px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <a href="#aa">跳转到以 id 为 aa 标记的锚点 a</a>
  <p>-------------分隔线-------------</p>
  <a name="aa">hhh</a>
  <div id="aa">aa</div>
  <a href="#bb" >跳转到 name 为 bb 的 a 标签锚点</a>
  <p>-------------分隔线-------------</p>
  <a name="bb">name 为 bb 的 a 标签的锚点</a>
  <p>-------------分隔线-------------</p>
  <div>bb</div>
  <a id="linkc">平滑滚动到 c</a>
  <p>-------------分隔线-------------</p>
  <div id="cc">cc</div>
  <a onclick="goTo()">利用 scrollIntoView 跳转到 d</a>
  <p>-------------分隔线-------------</p>
  <div id="dd">dd</div>
  <p>-------------分隔线-------------</p>
  <div></div>
</body>
<script>
  var cc = document.querySelector('#cc')
  var linkc = document.querySelector('#linkc')

  function to(toEl) {
    //ele为指定跳转到该位置的DOM节点
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)

    console.log(height)
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

</script>
<script>
  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }
</script>
</html>

效果图：

习布局前须知道 CSS 中的定位机制。

标准文档流（Normal Flow）

浮动（Float）

绝对定位（Absolute Positioning)

标准文档流：从上到下，从左到右的输出文档内容。它由块级（block）元素和行级元素组成，且它们都是盒子模型。

布局是指浏览器将元素以正确的大小摆放在正确的位置上。

display：

设置元素的显示方式

display:block

默认宽高为父元素宽高
可设置宽高
换行显示
默认为block的元素：<div>, <p>, <h1> ~ <h6>, <ul>, <form>

display:inline

默认宽度为内容宽度
不可设置宽高
同行显示（元素内部可换行）
默认为inline的元素：<span>, <a>, <label>, <cite>, <em>

display:inline-block

默认宽度为内容宽度
可设置宽高
同行显示
整块换行
默认为inline-block的元素：<input>, <textarea>, <select>, <button>

display:none

设置元素不显示

display:none 与 visibility:hidden 的区别为 display:none 不显示且不占位，但 visibility:hidden 不显示但占位。

position

position 用于设置定位的方式与top right bottom left z-index 则用于设置参照物位置（必须配合定位一同使用）。

三种定位形式

静态定位（static）
相对定位（relative）
绝对定位（absolute、fixed）

position: static | relative | absolute | fixed
/* 默认值为 static */

position:relative

相对定位的元素仍在文档流之中，并按照文档流中的顺序进行排列。
参照物为元素本身的位置。

最常用的目的为改变元素层级和设置为绝对定位的参照物。

position:absolute

建立以包含块为基准的定位，其随即拥有偏移属性和 z-index 属性。

默认宽度为内容宽度
脱离文档流
参照物为第一个定位祖先或根元素（<html> 元素）

position:fixed

默认宽度为内容宽度
脱离文档流
参照物为视窗

NOTE：宽高的100%的参照依然为视窗（例：网页遮罩效果）

top/right/bottom/left

其用于设置元素边缘与参照物边缘的距离，且设置的值可为负值。在同时设置相对方向时，元素将被拉伸。

z-index

其用于设置 Z 轴上得排序，默认值为 0 但可设置为负值。（如不做设置，则按照文档流的顺序排列。后面的元素将置于前面的元素之上）

z-index 栈

父类容器的 z-index 优于子类 z-index 如图

float

CSS 中规定的定位机制，其可实现块级元素同行显示并存在于文档流之中。浮动仅仅影响文档流中下一个紧邻的元素。

float: left | right | none | inherit

默认宽度为内容宽度
脱离文档流（会被父元素边界阻挡与position脱离文档流的方式不同）
指的方向一直移动

float 元素在同一文档流中，当同时进行 float 时它们会按照文档流中的顺序排列。(当所有父元素中的所有元素脱离文档流之后，父元素将失去原有默认的内容高度)

注意：float 元素是半脱离文档流的，对元素是脱离文档流，但对于内容则是在文档流之中的（既元素重叠但内容不重叠）。

clear

clear: both | left | right | none | inherit

应用于后续元素
应用于块级元素（block）

使用方法：

优先级自上而下

clearfix 于父元素
浮动后续空白元素 .emptyDiv {clear: both}
为受到影响的元素设置 width: 100% overflow: hidden 也可
块级元素可以使用 <br> 不建议使用，影响 HTML 结构

/* clearfix */
.clearfix:after {
 content: "."; /* Older browser do not support empty content */
 visibility: hidden;
 display: block;
 height: 0;
 clear: both;
}
.clearfix {zoom: 1;} /* 针对 IE 不支持 :after */

flex

弹性布局可用于多行自适应，多列自适应，间距自适应和任意对齐。

创建 flex container

display: flex
/* 弹性容器内的均为弹性元素*/

flex item

只有弹性容器在文档流中的子元素才属于弹性元素。

<div style="display: flex;">
 <div>Block Element</div>
 <!-- flex item: YES-->
 <span>Inline Element</span>
 <!-- flex item: YES-->
 <div style="position:absolute;">Absolute Block Element</div>
 <!-- flex item: YES-->
</div>

flex 方向

flex-direction

<!-- 默认值为 row -->
flex-direction: row | row-reverse | column | column-reverse

flex-wrap

<!-- 默认值为 nowrap -->
flex-wrap: nowrap | wrap | wrap-reverse

flex-flow

flex-flow 为 flex-wrap 与 flex-direction 的简写，建议使用此属性（避免同时使用两个属性来修改）。

flex-flow: <'flex-direction'> || <'flex-wrap'>

order

order 的值为相对的（同被设置和未被设置的值相比较），当均为设置时默认值为 0 则按照文档流中的顺序排列。

order: <integer>
<!-- 默认为 0 -->

flex 弹性

flex-basis

其用于设置 flex-item 的初始宽高（并作为弹性的基础）。如果 flex-direction 是以 row 排列则设置宽，如以 column 排列则设置高。

flex-basis: main-size | <width>

flex-grow

伸展因子，其为弹性布局中最重要的元素之一，flex-grow 设置元素可用空余空间的比例。flex-container 先安装宽度（flex-basis）进行布局，如果有空余空间就按照 flex-grow 中的比例进行分配。

Width/Height=flex-basis + flex-grow/sum(flow-grow) * remain

flex-grow: <number>
initial: 0
<!-- 默认值为 0 -->

flex-shrink

收缩因子，用于分配超出的负空间如何从可用空间中进行缩减。

flex-shrink: <number>
initial: 1
<!-- 默认值为 1 -->

Width/Height=flex-basis + flow-shrink/sum(flow-shrink) * remain

remain 为负值，既超出的区域。

flex

其为 flex-grow flex-shrink flex-basis 的值缩写。

flex: <'flex-grow'> || <'flex-shrink'> || <'flex-basis'>
initial: 0 1 main-size

flex 对齐

justify-content

其用于设置主轴（main-axis）上的对其方式。弹性元素根据主轴（横向和纵向均可）定位所以不可使用 left 与 right 因为位置为相对的。（行为相似的属性有 text-align）

justify-content: flex-start | flex-end | center | space-between | space-around
<!-- 默认值为 flex-start -->

align-items

其用于设置副轴（cross-axis）上的对其方式。（行为相似的属性有 vertical-align）

align-items: flex-start | flex-end | center | baseline | stretch
<!-- 默认值为 stretch -->

align-self

其用于设置单个 flex-item 在 cross-axis 方向上的对其方式。

align-self: auto | flex-start | flex-end | center | baseline | stretch
<!-- 默认值为 auto -->

align-content

其用于设置 cross-axis 方向上的对其方式。

在线咨询

上一篇：Chrome出品！网页版免费涂鸦画板！
下一篇：浪漫的星光闪烁文案短句

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS定位属性用CSS定位属性精确控制你的网页布局！

一、Static（静态定位）

二、Fixed（固定定位）

三、Relative（相对定位）

四、Absolute（绝对定位）

五、z-index（层级顺序的改变）

言

一、 纯 html 实现

1. 利用 id 为标记的锚点

2. 利用 a 标签的 name 属性作为锚点

二、 js 实现

1. 利用 scrollTo()

2. 利用 scrollIntoView()

您的项目需求

一、纯 html 实现