HTML中Position属性的定位区别x

最新推荐文章于 2021-06-04 11:26:49 发布
最新推荐文章于 2021-06-04 11:26:49 发布
阅读量511 收藏
点赞数
分类专栏： HTML 文章标签： HTML position absolute relative
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhichengjueying/article/details/44783465
版权

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。
absolute:脱离了文本流，原来的空间消失，不会占领别的空间，通过z-index的值来调整元素的上下位置。

relative：根据原来的位置进行定位。原来的空间不会消失。通常会出现空白；


zhichengjueying
关注
专栏目录
CSS Position定位（详解网页中的定位属性）
百赢出品，必属精品
04-25 1856
文档流（Document Flow）：HTML元素默认按照文档流从上到下依次排列，形成页面布局。定位：定位是指通过CSS将元素摆放到指定位置的技术，不受文档流的限制。定位属性（position）用于指定元素的定位方式，可选值包括相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。相对定位（Relative Positioning）元素相对于其正常位置进行定位，通过设置top、right、bottom和left属性进行偏移。
[CSS] position 相对定位和绝对定位
努力进步的配菜
08-12 730
CSS position的四个属性值
HTML的position属性简单应用
PWQ002的博客
07-30 604
HTML的position属性使用 一、position的应用场景 position有多个值，其中三个经常用的到分别：relative absolute fixed。 relative ：相对定位，相对自己当前位置进行定位，会被相邻元素影响，在子元素进行top、left等定位时候会根据父辈来参考。 absolute 绝对定位，相对于父级并且父级设置了relative 进行定位。如果父级没有设置relative 使用margin-top属性的时候，会让父级随之变动。 代码如下： <!DOC
HTML中的Position定位的区别
zhichengjueying的专栏
03-31 555
position的属性值：相对定位（relative).绝对定位（absolute)这两个属性值的区别。 relative:不会脱离文本流，他会按照原来默认的位置进行改变。 absolute:会脱离文本流，他会选择最近的父级元素进行定位。 static和relative差不多。 fixed和absolute差不多。
html position属性作用,position(五种属性，以及每个属性的特点)
weixin_39926311的博客
06-04 1157
1. position: relative;相对定位1> 不影响元素本身特性(无论区块元素还是内联元素会保留其原本特性)2> 不会使元素脱离文档流(元素原本位置会被保留，即改变位置也不会占用新位置)3> 没有定位偏移量时对元素无影响(相对于自身原本位置进行偏移)4>提升层级(用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-...
定位position
Xkobe的博客
07-05 150
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;定位&lt;/title&gt; &lt;style&gt; *{ margin:0; padding:0; } .div0{ width:40
CSS：谈一谈position
xxiaoByJuly的博客
08-21 246
CSS中position是用来指定元素位置 通常在布局时： float—适合左右布局 position—适合叠加布局 1.relative(以自身为原点进行移动) ​ 如果没有定位偏移量，对元素本身没有任何影响 ​ 不使元素脱离文档流 ​ 不影响其他元素布局 ​ left right top bottom是相对于当前元素进行偏移的（0，0）是当前匀速左上 2.absolute ​ 使元素脱离文档流 ​ 使内联元素支持宽高（让内联具备块特性 ​ 使块元素默认宽高根据内容决定（让块元素具备内联特性 ​ 如果有
css position属性四个值：static、fixed、absolute和relative的区别和用法
mus-z的博客
02-10 676
参考：https://zhuanlan.zhihu.com/p/29207938 https://blog.csdn.net/tengliu6/article/details/52088743 1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 2、relative（相对定位）：生成相对定位的...
html布局中关于相对定位的CSS实例position: relative
我是Sinlion
08-30 1518
position在CSS中是一个相对狭义的概念，真正的实现定位仅仅靠它是无法完成的，翻译为“定位参考”可能更直观点。 有四个常用的参数可以赋给position，分别是static、relative、absolute、fixed，今天主要是研究下相对定位relative。 在这之前先说一下static，静态定位。 position: static; 所有html元素默认的就是 static，所以编...
CSS基础：position属性详解与布局实战
本篇文章主要介绍了HTML基础知识中CSS样式表的相关概念和技术，特别是关于position属性的深入解析。CSS样式表是网页设计中至关重要的组成部分，它用于控制网页元素的布局、外观和行为。本文详细讲解了三个关键的...
HTML5高级之position(定位)
热门推荐
Wendy
11-15 8万+
position 属性规定元素的定位类型，定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。      position一般分为三种，一种是相对定位relative，一种是绝对定位absolute，一种是固定定位fixed，接下来分别说明这三个属性的用法以及相对应的特性，并举例说明。
position(x:y:) 设置视图位置 布局（SwiftUI中文文档手册）
iCloudEnd的博客
08-08 1524
position(x:y:) 将此视图的中心定位在其父级坐标空间中的指定坐标处。 func position(x: CGFloat = 0, y: CGFloat = 0) -> some View 返回值 将视图的中心固定在x和y的视图。 参量 X 放置此视图中心的x坐标。 y 放置此视图中心的y坐标。 讨论区 使用position（x：y :)修饰符使用x和y偏移将视图的中心放置在父视图中的特定坐标上。原点位于左上角，通常NSWindow原点位于左下角。 Text("Position by
JavaScript中的backgroundPosition的设置
cherry_vicent的专栏
03-11 1万+
在CSS中background-position有对值的设置有两种：一是用数值（绝对的），另一个使用百分比（相对的）。这两种方式会有不同的浏览器兼容问题（主要是IE和FF）。 基本代码如下 style="overflow-y:scroll;height:300px;" charset="UTF-8"> mag3 rel="stylesheet"
HTML中position的五种属性值
On my way
04-06 1万+
<html > <head> <meta http-equiv="content-type" content="text/html" charset="gb2312"> <style> *{margin:0;padding:0} </style> </head> <body> <div style="position:absolute;height:400px;width:400px;
HTML中元素的position属性详解
wangzunkuan的博客
08-09 7802
CSS 有三种基本的定位机制：相对定位（relative）、浮动定位（float）和绝对定位（absolute）。默认情况下，所有元素都采用相对定位，即DOM元素的位置由元素在 (X)HTML 中的位置决定。普通定位的具体规则是： 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边...
CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么?
05-12 854
在CSS中关于定位的内容是：position:relative | absolute | static | fixed • static 自动定位，自动定位就是元素在页 面普通文档流中由HTML自动定位，普通文档里中的元素也称为流动元素。不能通过z-index进行层次分级。 • relative 相对定位，相对定位不脱离文档流，参考其在原来文档流中的位置，通过 top,bottom,l...
H5CSS3笔记-定位布局中的position属性
tamakisakura
04-23 1792
1.position属性的意义：position属性决定了元素将如何定位通过top、right、bottom、left实现位置的改变。2.position属性的可选参数：·static: position属性中的默认值，元素按照标准流的方式进行正常排列。·relative:生成相对定位的元素，相对于其正常位置（即正常文档流时候的位置）进行定位。 相对定位，仍然处于标准流中。&lt;!DOCTYPE...
position 属性的常用的5种取值
qq_41306423的博客
06-22 1万+
日期：2020 年 6 月 22 日 position 属性 前言 说到 CSS 的 position 属性，大家都知道也都用过，但是要说它有几个取值以及这些值的不同，可能有部分同学会哑口无言，毕竟这不影响日常开发（手动狗头），身为一名有梦想的程序员，我们应该秉承刨根问底的钻研精神，不能浅尝辄止、不求甚解，万丈高楼平地起，基础才是万物之根，基础知识掌握了，后面的学起来也会更容易 废话不多说，正文开始 小序 position 属性的取值有：static | relative | absolute | fixe
css中position的详细介绍
菜鸟腾飞
08-26 1240
在html中网页可以看成一个立体的空间，一个完整的页面是由很多个页面堆积形成的，如下图所示 CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。◆position:static　无定位该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用po
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值