CSS Position 属性如何工作-用代码示例解释
lipiwang 2024-10-19 08:19 12 浏览 0 评论
今天我们将学习所有你需要知道的关于 CSS position 属性的例子。让我们开始吧 ?
目录
- 什么是 CSS Position 属性?
- CSS 中的 静态定位
- What is the Fixed Position in CSS?
- CSS 中的 固定定位
- CSS 中的 粘性定位
你可以在 YouTube 上观看本教程：
CSS 中的 position 属性
如果你想要制作一个 独特、漂亮、有艺术风格的网页，那么你绝对应该学习如何使用 CSS 的 position 属性。让我们来看看它是如何工作的。
使用 Flexbox 或者 Grid, 你可以制作一个 对称的网站, 像这样：
Flexbox制作的网站
通过 position 属性, 你可以制作一个 非对称的网站，像这样：
** Grid 和 position 属性 制作的网站**
你不能使用Flexbox和Grid把你的内容放在所有你想要的地方。你会受限于 X 轴和 Y 轴。看看这幅图你就会明白我的意思了:
对称的内容布局显示元素分别放置在x轴和y轴
你的盒子会遵循这些衡量因素。
但是，使用 position 属性，你可以通过将每个元素与其他元素分离来将内容放置在你希望的任何位置。当使用位置属性时，你可以将内容放置到任何你想要的地方。
不对称的内容布局，不需要考虑x轴和y轴的位置。
你可以用这种布局把你的盒子放在任何你想要的地方。换句话说，你可以在屏幕上将元素 自由移动。
下面是另一个使用position属性的例子:
一个非对称的网页
你可以使用 position 属性在整个页面来放置或移动那些小点和波浪图案和甜甜圈图像 ? 至任何你想要的地方。
项目搭建
对于这个项目，你可以使用任何安装了 emmet插件 的代码编辑器。我将使用 CodePen.io.
HTML
body 标签内部，写如下代码：
<div class="box-1"> </div>CSS
清除默认浏览器设置并添加如下 CSS:
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}设置 box-1 类样式：
.box-1{
width: 120px;
height: 120px;
background-color: skyblue;
border: 2px solid black;
}position 属性有5个值：
- relative
- absolute
- static
- fixed
- sticky
为了移动我们的容器，我们使用以下四个属性：
- Top, Bottom
- Left, Right
CSS 中的静态定位
其是每个元素定位的 默认值。
每个元素的默认位置
CSS 中的相对定位和绝对定位
relative 属性 和 absolute 属性 的工作原理是一样的，不同在于，我们使用 relative 来标识父类。使用 absolute 来标识子类。
相对定位和绝对定位
看如下2个例子
我们先尝试一下 relative 值。写如下代码：
.box-1{
/* 在此写其他代码*/
position: relative;
left: 100px;
}得到的结果如下：
我们可以使用 absolute 值得到相同的结果，如
.box-1{
/* 在此写其他代码*/
position: absolute;
left: 100px;
}让我们研究一下相对定位和绝对定位的主要区别。
CSS 中的相对定位和绝对定位
HTML
在 HTML 中编写如下代码：
<body>
<div class="box-1">
<div class="box-2"> </div>
</div>
</body>CSS
设置如下 CSS 样式：
.box-1{
width: 300px;
height: 300px;
background-color: skyblue;
border: 2px solid black;
margin: auto;
}
.box-2{
width: 100px;
height:100px;
background-color: pink;
border: 2px solid black;
}应该会是这样：
结果是左上方有一个蓝色盒子和一个较小的粉色盒子
现在，我们设置一下类样式：
body{ }
.box-1{ }
.box-2{ }现在，在 CSS 中写如下类样式：
body{
}
.box-1{
/* 这是父元素 */
position: relative;
}
.box-2{
/* 这是子元素 */
position: absolute;
left: 100px;
}结果如下：
结果是粉色盒子右移了100px
注意 .box-2 相对于 .box-1 移动了 100px。
This is because .box-1 is the parent and .box-2 is the child. 这是因为 .box-1 是 父元素，.box-2 是 子元素。
再做一些改变，在 CSS 中写如下代码：
body{
/* 这是 父元素 */
position: relative;
}
.box-1{
}
.box-2{
/* 这是 子元素 */
position: absolute;
left: 100px;
}结果是这样的：
结果是粉色盒子相对于 body 移动了100px
注意是 .box-2 相对于 body 标签移动了 100px 。
这是因为 body 是 父元素，.box-2 是 子元素。
固定定位（Fixed）
这个值会将元素固定在屏幕上的某一位置，即使浏览器发生滚动。让我们看几个例子，看看它是如何工作的。
固定定位的例子
在 HTML 中写如下代码。
<div class="container">
<p>lorem200</p>
<div class="box-1"> fixed </div>
<p>lorem200</p>
</div>CSS 如下：
.container{
height: 3000px;
}
.box-1{
height: 120px;
width: 120px;
background-color: skyblue;
border: 2px solid black;
display: grid;
place-content: center;
}在底部添加如下 CSS：
.box-1{
position: fixed;
top: 100px;
left: 200px;
}结果如下：
可以看到，即使在滚动浏览器时，该元素仍然是固定的。
粘性定位（Sticky）
当滚动到屏幕某个点后，这个值会将元素 固定在 屏幕上，不再移动。
粘性定位示例
无需改变你当前的HTML和CSS中的任何东西，只需改变这个值:
.box-1{
/* 使用这个值 */
position: sticky;
top: 30px;
left: 200px;
}结果如下：
你会发现，当滚动到屏幕某一 *特定点 后，该元素会仍然固定在浏览器屏幕的顶端。
你可以查看这些网站，看看粘性定位在实际网站上是如何工作的。
- AwakeBoards
- Ferme
- LATORRE
总结
现在，你可以自信地制作漂亮的网站，并使用 position 属性解决简单的布局问题。
相关推荐
- 超越JSON.parse:JavaScript中高效反序列化的艺术
-
当我们需要在网络间传输数据或将数据存储到本地存储时，我们通常会将JavaScript对象转换为字符串，然后在需要时再将其转换回对象，这就是数据序列化与反序列化。虽然JSON.parse()和JSON....
- 如何给别人网页上增加内容通过Chrome扩展为网页添加快速滚动功能
-
ContentScripts来看开发网站的介绍，ContentScripts是一类在网页上下文中运行的文件。它们可以使用标准的DOM接口，实现读取浏览器访问的网页的详细信息，比如网页的DOM结构...
- JavaScript执行栈和执行上下文（js 执行上下文与执行栈）
-
在JavaScript中，执行栈和执行上下文是理解代码执行流程和作用域链的关键概念。它们决定了代码如何执行以及变量和函数如何被查找和访问。本文将详细介绍执行上下文的生命周期、执行栈的工作原理以及它们在...
- 防止浏览器缓存特定JS文件的常用方法
-
防止浏览器缓存特定JavaScript文件的常用方法：1.添加版本号或时间戳在引用JavaScript文件时，在URL中添加一个版本号或时间戳作为查询参数。这样每次更新文件后修改这个参数值，就能让浏...
- 前端面试:JavaScript 字符串的常用方法?
-
JavaScript字符串是一种不可变的数据类型，因此在使用字符串时需要注意以下几个方法：charAt(i):返回指定索引位置的字符。concat(str[,start[,end]]):连接...
- Sequelize 在 Node.js 中的详细用法与使用笔记
-
1.Sequelize简介Sequelize是一个基于Promise的Node.jsORM(Object-RelationalMapping)工具，支持PostgreSQL、My...
- 前端js加密解密常用的六种方法（js加密解密源代码）
-
一、MD5加密可以使用md5插件进行加密插件地址：github.com/blueimp/JavaScript-MD5计算给定字符串值的（十六进制编码）MD5哈希值：计算给定字符串值和键的（十六进制编...
- javascript深拷贝浅拷贝原理分析（js深拷贝和浅拷贝如何实现）
-
用js处理数据的时候经常遇到这样一个问题，需要保留原始数据不变情况下，进行一系列数据操作，这时候需要制作一份原始数据的副本数据来进行操作注意的是引用数据类型和基本数据类型在内存中存储方式是不一样的，只...
- 1、从零开始了解和使用WPS的js宏(JSA)
-
最近使用了一下wps的宏本地客户端功能进行了数据查询，与vba相比感觉还是比较好用的。（所谓本地客户端就是指单机使用运行的wps程序）VBA因为长时间的发展，胜在功能比较强大，支持一些Active...
- JavaScript字符串查找方法总结（js查找子串）
-
在JavaScript中，查找字符串的常用方法有以下几种，根据不同的需求选择合适的方式：1.indexOf()/lastIndexOf()作用：查找子字符串首次出现的位置（indexOf）或...
- JavaScript 合并数组的三种方法（js数组合并的几种方法）
-
数组作为一种数据结构，表示索引项的有序集合。经常会使用到数组，尤其是将多个数组进行合并，比如将数组[1,2,3]和数组[4,5,6]合并，最终得到数组[1,2,3,4,5,6]。数组的合并分不...
- JS短文，如何正确理解Splice() 函数与Slice() 函数
-
转载说明：原创不易，未经授权，谢绝任何形式的转载Splice()函数与Slice()函数都是JavaScript数组中常用的方法之一。虽然它们的名称很相似，但它们的作用却截然不同。在这篇文章...
- JavaScript字符串concat()方法教程
-
一、简介JavaScript中的字符串是一种基本数据类型，它可以用单引号或双引号括起来。concat()方法用于将一个或多个字符串连接起来，并返回连接后的新字符串。concat()方法不会改变原始字符...
- 手把手教你常用的59个JS类方法（js几种类型）
-
前言前端开发有时会处理一部分后台返回的数据,或者根据数据判断做一些处理;这个时候就非常有必要将一些常用的工具类封装起来;本文根据常用的一些工具类封装了59个方法,当然还有很多用的较少前期没有录...
- js数组常用方法总结（js数组的使用）
-
首先说明，本文没技术含量，都是js的知识，只是为以后查阅方便。另外我们开了一个免费的讲解web前端课程，有兴趣的朋友可以去看，详情地址：http://fe.qietu.com/forum.php1、创...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- maven镜像 (69)
- undefined reference to (60)
- zip格式 (63)
- oracle over (62)
- date_format函数用法 (67)
- 在线代理服务器 (60)
- shell 字符串比较 (74)
- x509证书 (61)
- localhost (65)
- java.awt.headless (66)
- syn_sent (64)
- settings.xml (59)
- 弹出窗口 (56)
- applicationcontextaware (72)
- my.cnf (73)
- httpsession (62)
- pkcs7 (62)
- session cookie (63)
- java 生成uuid (58)
- could not initialize class (58)
- beanpropertyrowmapper (58)
- word空格下划线不显示 (73)
- jar文件 (60)
- jsp内置对象 (58)
- makefile编写规则 (58)