5 种 CSS 位置类型，让你实现更好的布局_css位置(1)

于 2024-09-03 22:31:50 发布
阅读量506 收藏 4
点赞数 5
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_86437188/article/details/141873596
版权

CSS 位置属性用于控制网页上元素的位置。它定义了元素相对于其包含元素或视口的定位方式。

以下是位置属性的可能值：

1）Static

这是所有 HTML 元素定位的默认值。在此定位中，元素按照文档的正常流程定位，这意味着它们按照 HTML 结构一个接一个地定位。此模式下元素的位置由其边距和填充决定。

将 top、right、bottom 或 left 属性应用于静态定位的元素将不会产生任何效果。z-index 也不适用于静态元素。

语法：

position: static;

举个例子：

<!DOCTYPE html>
<html lang="en">
  <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" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS position property</title>
  </head>
  <body>
    <div class="box box1">Box1</div>
    <div class="box box2">Box2</div>
    <div class="box box3">Box3</div>
  </body>
</html>

CSS:

.box {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
  color: white;
  padding: 10px;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: blue;
  position: static;
}
.box3 {
  background-color: green;
}

输出：

在上面的例子中，我们有 3 个盒子，它们都具有相同的高度和宽度。position: static;属性仅应用于第二个框。

但是，第二个框的布局与其他两个框没有区别，因为 static 是所有 HTML 元素的默认值。

2) relative

使用position: relative元素遵循其正常的文档流，但可以从其原始位置移动。这可以使用 top、right、bottom 和 left 属性来实现。

使用此属性，周围的元素不会受到影响，但元素原本处于静态位置的位置将会有空间。

语法：

position: relative;

举个例子：

<!DOCTYPE html>
<html lang="en">
  <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" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS position property</title>
  </head>
  <body>
    <div class="box box1">Box1</div>
    <div class="box box2">Box2</div>
    <div class="box box3">Box3</div>
  </body>
</html>

CSS:

.box {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
  color: white;
  padding: 10px;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: blue;
  position: relative;
  top: 20px;
  left: 50px;
}
.box3 {
  background-color: green;
}

输出：

在上面的示例中，第二个框向下移动 20 像素（使用 top 属性），向右移动 50 像素（使用 left 属性）。移动的框不会影响周围元素（框 1 和框 3）的位置。

3）absolute

使用position:absolute的元素不遵循文档的正常流程。该元素相对于其最近定位的祖先（具有相对、绝对、固定或粘性定位的元素）进行定位。

语法：

position: absolute;

举个例子：

<!DOCTYPE html>
<html lang="en">
  <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" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS position property</title>
  </head>
  <body>
    <div class="box box1">Box1</div>
    <div class="container">
      <div class="box box2">Box2</div>
    </div>
    <div class="box box3">Box3</div>
  </body>
</html>

CSS：

.box {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
  color: white;
  padding: 10px;
}
.container {
  border: 3px solid black;
  height: 200px;
  width: 200px;
  position: relative;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: blue;
  position: absolute;
  top: 30px;
  left: 50px;
}
.box3 {
  background-color: green;
}

输出：

在上面的示例中，第二个盒子位于容器内。容器的位置设置为相对，第二个框的位置设置为绝对，并且该框向下移动 30 像素（使用 top 属性），向右移动 50 像素（使用 left 属性）。容器是第二个盒子的祖先。

如果没有祖先怎么办？

然后该元素将相对于视口定位。

例如：

<!DOCTYPE html>
<html lang="en">
  <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" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS position property</title>
  </head>
  <body>
    <div class="box box1">Box1</div>
    <div class="box box2">Box2</div>
    <div class="box box3">Box3</div>
  </body>
</html>

CSS：

.box {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
  color: white;
  padding: 10px;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: blue;
  position: absolute;
  top: 30px;
  left: 50px;
}
.box3 {
  background-color: green;
}

输出：

4）fixed

使用位置：固定元素相对于视口定位，并且即使页面滚动也保持固定。

语法：

position: fixed;

举个例子：

<!DOCTYPE html>
<html lang="en">
  <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" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS position property</title>
  </head>
  <body>
    <div class="box box1">Box1</div>
    <div class="box box2">Box2</div>
    <div class="box box3">Box3</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </body>
</html>

CSS：



.box {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
  color: white;
  padding: 10px;
  border: 1px solid black;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: blue;
  position: fixed;
  top: 50px;
  left: 50px;
}
.box3 {
  background-color: green;
}

输出：

在上面的示例中，即使向下滚动页面，第二个框的位置也将是固定的。

有了这个属性，就不像position:relative; 元素原本处于静态位置的位置将不再有空间。

5）sticky

使用position: sticky;元素根据用户的滚动位置进行定位。它的行为类似于相对元素，直到用户滚动到某个位置，之后它相对于其包含元素或视口变得固定。

语法：

2401_86437188
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DIV+CSS布局练习
11-21
对基础的网页布局模式！！！！！！学习web开发的基础，学习web开发的第一步。
HTML5 + CSS3 实现 3d 室内布局源码
03-22
这个“HTML5 + CSS3 实现 3d 室内布局源码”项目是一个很好的实例，展示了如何利用这两种技术来构建具有三维效果的室内设计展示。 首先，HTML5是超文本标记语言的最新版本，它引入了许多新的元素和功能，旨在提高...
CSS3新增定位属性sticky，粘性定位
weixin_43915587的博客
04-05 1251
position:sticky sticky 英文字面意思是粘，粘贴。 这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。 什么是结合两种定位功能于一体呢？ 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。 而后，元素...
CSS 定位
小白向前冲！
02-01 546
【1】 ——html中3种布局方式：    （1）标准流（顺序布局）： 元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。    （2）浮动 float ：    （3）定位 position ： 可选参数有 static 、absolute  、 relative 、 fixed 、 inherit     
CSS位置大全
WEGST的博客
02-14 256
CSS position、absolute 、relative 参考链接：MDN 默认位置 一个元素会占一定的位置，初始位置就是紧跟上一个出现的地方出现的位置， Relative 相对于原来位置的移动 可以点击进去上面的链接调整一一下，如果都为0的话和是第一种情况出现是一样的 Absolue 这个需要注意的是，他在文档流中相当于是不占位置的，他是相对于非static 的祖先元素来移动的 Fixed 同样不占位置 永远固定在屏幕的那个位置，不会再滚动的时候改变位置 ...
css中的位置定位
国家一级程序员
02-12 1163
css中四种位置定位详解
可视化布局_html5_js_beganth5_css_可视化布局js_
09-30
例如，你可以用JS改变元素的位置、大小，或者根据用户操作实时更新布局。此外，现代JavaScript库和框架，如jQuery、React或Vue.js，提供了更高级的功能，帮助开发者更高效地管理DOM（文档对象模型）和状态，创建复杂...
css1.rar_DIV css布局
09-23
在“css1.rar”这个压缩包中，你将找到一系列关于Div+CSS布局的实例和解决方案，通过实践这些实例，你可以深入理解并熟练应用上述知识点，从而提升你的网页设计技能。记得理论与实践相结合，不断探索和尝试，才能更...
CSS用四种方式实现布局
09-25
本文将详细探讨四种常见的CSS布局方式，帮助你更好地理解和掌握网页布局技巧。 一、流体浮动布局 流体浮动布局是基于百分比单位来调整元素大小的一种布局方式，它能够使网页内容随着浏览器窗口的大小变化而自动...
DIVCSS.rar_css pdf_css布局
09-24
《DIV+CSS布局.pdf》是关于网页设计中一种常见的布局技术——DIV+CSS的详细教程。这个压缩包包含了这...无论你是初学者还是有一定经验的开发者，这本书都提供了丰富的资源，帮助你更好地理解和应用DIV+CSS布局技术。
CSS 定位详解
最新发布
weixin_51341611的博客
03-21 349
display和position。display属性指定网页的布局。和。本文介绍非常有用的position属性。我希望通过10分钟的阅读，帮助大家轻松掌握网页定位，说清楚浏览器如何计算网页元素的位置，尤其是新引进的sticky定位。本文由国内最大的在线教育平台之一赞助。他们现在启动了，推广平台上的课程资源，有不少优质内容。希望提高前端技术水平的同学，可以留意一下本文结尾的免费课程信息。
CSS Positioning(定位)
Vipwxs的博客
01-11 332
CSS Positioning(定位)： position 属性指定了元素的定位类型。 position 属性的四个值： static relative fixed absolute 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 static 定位
CSS布局
qq_43539854的博客
04-05 2178
CSS布局 table布局 table的特性决定了它非常适合用来做布局，表格中的内容可以自动居中。但table局部有很多缺点： 比其他HTML标签占更多的字节，造成下载时间延迟，占用服务器更多资源 阻挡浏览器渲染引擎的渲染顺序，延迟页面的加载速度 flex布局 1. 盒模型 标准盒子模型：width = 2 * border + 2 * padding + content IE盒子模型：width = 2 * border + 2 * padding > content ? border * 2
CSS | 定位
zljiaa的博客
08-15 189
有许多不同类型的定位，可以对HTML元素生效。要使某个元素上的特定类型的定位，我们要使用position属性。 静态定位 静态定位是每个元素获取的默认值，它只是意味着“将元素放入它在文档布局流中的正常位置 。 相对定位 相对定位是我们将要看的第一个位置类型。 它与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。 ...
css-布局
简简单单，仔仔细细，只是一个开发者
01-26 334
css布局分为三种类型：流布局、浮动布局、层布局。 流布局 流布局是默认的网页布局，在流布局中，块状元素会按上下结构排列，因为块状元素宽度是100%，而内敛元素按左右方向排列。 浮动布局 .div1{float:right;}//元素向右浮动 .div2{float:left;}//向左浮动 .div3{float:none;}//不浮动 浮动元素可以向左向右浮动，直到碰到边
css布局练习
又菜又想学java的博客
03-01 140
要实现的效果： 提供的图片素材有： 就是让前面的标题小图片和后面的文字标题一一对应起来 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .one{ width: 300px; color: rgb(255,254,250); ba
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值