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

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

>position 属性是布局函数的关键工具，通过改变元素的位置和大小属性。了解如何正确设置这个属性将有助于根据要求对页面进行最出色的布局。 position 属性使页面渲染和布局更加灵活并便于设计更("\\( \ )"精心处理的页面。

取一个网页，我们需要了解一下网页的结构，如果想要深入学习，建议看一下《网页设计与制作》，这本书讲述较为详细，推荐阅读。

网页的三大组成部分——HTML、CSS、JavaScript，如果把网页比作一个人的话，HTML相当于骨架，JavaScript相当于肌肉，而CSS相当于皮肤，三者结合起来形成一个完整的网页。

网页基本结构

1.HTML

HTML（Hyter Markup Language 超文本标记语言），主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。HTML提供了很多种标记，如段落标记（p标签）、图片标记（img标签）、视频标记（video标签）等，网页中需要定义什么内容，就可以用相应的标记描述。

首页源代码

从图可见，网页内容是通过HTML标记（图中带有“<>”的符号）描述的，整个网页由各种标签嵌套而成。

2.CSS

HTML其实是一个纯文本文件，只是网页的一个骨架，只有HTML的网页其实并不美观，为了让网页看起来更好看，我们需要借助CSS。

CSS（Cascading Style Sheets 层叠样式表），“层叠”指的当HTML中引用了数个样式文件，并且样式发生冲突时，浏览器能依据层叠顺序处理，“样式”指的是网页文字、图片等的大小、颜色、排列等格式。

body {
    font: 12px/1.14 SF Pro Display,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,Helvetica Neue,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #333;
    outline: 0;
}
font、color、outline即样式设置

CSS的位置很灵活，即可以嵌入在HTML文档中，也可以时一个单独的外部文件，如果是独立的文件，则必须以.css为扩展名，使用link标签引入文件。上图CSS显示为内嵌方式，一般集中放在HTML文档头部（<head>标签内）。

3.JavaScript

JavaScript，简称JS，是一种脚本语言，可使网页具有交互性（HTML和CSS制作的网页是静态网页），js脚本语言使得用户与信息是一种实时、动态、交互的页面功能，如页面效果切换、动画效果、页面游戏等，它还可以控制cookies，包括创建和修改等。

JavaScript通常也是以单独文件形式加载，后缀为js，在HTML中通过script标签引入，如<scrip src="jquery-2.1.0.js" type="text/javascript"></script>。

4.爬虫的基本原理

我们可以把互联网看作一张大网，而爬虫（即网络爬虫）就是在网上爬行的蜘蛛，把网的节点比作一个个网页，爬虫爬到一个节点就相当于访问了该页面，获取了其信息，节点之间的线就像与网页与网页之间的链接关系，蜘蛛可顺着节点连接继续爬行到下一个节点，即通过一个网页爬取另一个网页，这样整个网的节点都可以被爬取到了。

那么爬虫的基本过程可以简单概述为：获取网页——提取信息——保存数据。

静态网页与动态网页

静态网页：用HTML代码编写的页面，每个网页都有一个固定的URL，加载速度快，编写简单，但可维护性差、交互性差，不能根据URL灵活多变地显示内容。

动态网页：以数据库技术为基础，可以大大降低网站维护的工作量，它可以动态解析URL参数的变化，关联数据库并动态呈现不同的页面内容，可以实现用户登录与注册功能。

在线咨询

上一篇：前端入门-html 中如何使用图片
下一篇：如何使用JavaScript获取百分比宽度元素的像素宽度

您的项目需求

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

整合营销服务商

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

一、Static（静态定位）

二、Fixed（固定定位）

三、Relative（相对定位）

四、Absolute（绝对定位）

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

1.HTML

2.CSS

3.JavaScript

4.爬虫的基本原理

静态网页与动态网页

您的项目需求