html中的position属性

最新推荐文章于 2021-09-15 09:01:21 发布

原创最新推荐文章于 2021-09-15 09:01:21 发布 · 1.1k 阅读

6 ·

CC 4.0 BY-SA版权

本文深入解析CSS中position属性的三种模式：absolute、relative和fixed。详细阐述了每种模式的定位方式及其应用场景，如网页广告设计中fixed定位的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

position共3个属性

1.absolute
脱离原来的位置进行定位
跟最近的父级进行定位，如果没有则相对文档进行定位

2.relative
保留原来的位置进行定位（自己原来的位置仍然占据）
相对自己原来的位置进行定位

3.fixed
与absolute定位模式相同，不同之处在于，fixed的定位结果相对文档不变，即不论文档滚动条如何变化，fixed修饰的模块位置不变（多用于网页中的广告设计，相信大家都深有体会）

可以借鉴此处，通过对多个子模块透明度的设计，改变position属性值实演

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

demons.ml

关注关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

HTML---定位

zhoutong2323的博客

12-25

4679

HTML中的定位属性指的是用来控制HTML元素在页面中的位置和布局的属性，包括position、top、bottom、left和right等。position属性指定了元素的定位方式，常用的取值有static、relative、absolute和fixed。通过设置不同的position值，可以实现元素的不同定位方式。top、bottom、left和right属性用于精确地定位元素的位置。当position属性的值为relative时，这些属性参照的是元素自身的位置进行调整；

CSS的position属性在DIV层中的应用

09-25

在网页设计中，CSS的position属性是一个非常重要的属性，它允许开发者控制元素在页面上的定位方式。position属性有几个值：static、relative、absolute、fixed以及最近添加的sticky。 1. static：这是position属性...

参与评论您还未登录，请先登录后发表或查看评论

详解html中 position属性用法（四种）

12-30

position的四个属性值： 1.relative 2.absolute 3.fixed 4.static 下面分别讲述这四个属性。 sub1 sub2 1. relative relative属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中，sub1和sub2是同级关系，如果设定sub1一个relative属性，比如设置如下CSS代码： #sub1 { position: relat

HTML中元素的position属性详解

wangzunkuan的博客

08-09

8234

CSS 有三种基本的定位机制：相对定位（relative）、浮动定位（float）和绝对定位（absolute）。默认情况下，所有元素都采用相对定位，即DOM元素的位置由元素在 (X)HTML 中的位置决定。普通定位的具体规则是：块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边...

HTML中的position属性

ioszhanghui的博客

07-23

6553

在CSS样式中，用的位置属性position，常用的有三种，releative,absolute,fix. releative 相对定位是相对于原本元素的静态位置，设置left,top,right,bottom进行位置移动，不会脱离文档流。可以通过z-index进行分层级。 absolute 绝对定位，相对于最近一个设置了position属性的元素，如果父元素没有设置position属性的，就...

HTML的position详解

热门推荐

xizi_ghq的博客

08-23

6万+

今天上课半斤八两半斤八两的我突然不愿意听课，于是突然有了雅兴来解决自己这几天的疑惑。先对自己理解的position做一个总结， 1、static：static是所有元素的默认属性，也就是可以理解为正常的文档流 2、relative:relative是相对于自己文档的位置来定位的，对旁边的元素没有影响 3、absolute：absolute是相对于父标签来进行定位的，如果没有父标签或者父标...

Position属性之relative用法

11-23

本文将深入探讨Position属性中的Relative用法，以及与之相关的绝对定位（Absolute）和固定定位（Fixed）的区别。 Position属性用于设定元素的定位类型，主要有以下几种值：static、relative、absolute和fixed。默认...

HTML position属性

徐冰的博客

10-14

6841

属性值： 1、static 2、relative 3、absolute 4、fixd 附：文档流又称正常流，是默认情况下HTML元素排版布局过程中元素会自动按照自上而下或从左往右进行流式排放的一种顺序。 1、static: 默认值。没有定位，元素出现在正常流中（忽略 top, bottom, left, right 或者 z-index 声明），即没有脱离文档流。例如： <div clas...

html position属性作用,position(五种属性，以及每个属性的特点)

weixin_39926311的博客

06-04

1208

1. position: relative;相对定位1> 不影响元素本身特性(无论区块元素还是内联元素会保留其原本特性)2> 不会使元素脱离文档流(元素原本位置会被保留，即改变位置也不会占用新位置)3> 没有定位偏移量时对元素无影响(相对于自身原本位置进行偏移)4>提升层级(用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-...

Css+Div布局学习（三）—定位Position

liyiye

09-22

230

所有的框模型一开始都是按文档中正常的元素流定位，而定位position属性允许我们改变这些自然的位置。通过利用一些简单的Css规则，position使得设计者可以将HTML元素精确放置，position属性确定了每个元素框（box）定位的参考点。在详细介绍之前，我们先简要的说明一下定位的4种方法： 1、静止定位（static）：这种方法使得所有的元素最终位置都是一个静止位置。所以没有什么需要特殊...

html position属性

qq_37016928的博客

05-25

731

HTML的position定位理解

zhh0310235的博客

08-07

1741

HTML的position定位有5种属性。 1、static 定位：没有定位，遵循文档流等先后顺序。 2、fixed 定位：固定到当前浏览器窗口位置，用top:20px;right:30px;等属性进行控制，固定在浏览器窗口距上边20像素，右边30像素的位置。 3、relative定位：相对于它正常位置的轻微距离平移，position:relative; left:-20px;相对与没有定位...

position

zengyonglan的博客

10-09

1320

详解CSS position属性通过position属性，我们可以让元素相对于其正常位置(relative)，父元素(absolute)或者浏览器窗口(fixed)进行偏移。 position四种类型（1）static position属性的默认值，默认情况下，块级元素和行内元素按照各自的特性进行显示（2）relative 相对定位，设置了这个属性后，元素会根据top，

position的属性

zuo_zuo_blog的博客

04-06

1万+

1.position: relative;相对定位不影响元素本身特性，不会使元素脱离文档流，没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移），提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-index只能在position属性值为relative或absolute或fixed的元素上有效。）（两个都为定位元素，后面的会覆盖前面的定位） 2.position: absolute 绝对定位使元素完全脱离文档流（在...

HTML基础知识（五）——position定位

weixin_48683052的博客

09-15

1万+

一、定位 1、常见的定位布局有float布局，position布局，flex（弹性盒子）布局。 position布局，定位布局。 2、定位布局：定位指的是指定一个元素在网页上的位置； 3、一共有5种定位方式，也就是说position属性主要有五个值：（1）static （2）relative （3）fixed （4）absolute （5）sticky （...

html之position总结

kkae8643150的专栏

11-02

387

后台开发过程中有时候需要调下前端什么的，比如几天前我们做项目的时候用了一个第三方js插件结果跟原有的产生了冲突，一个箭头的位置始终不对，我调了好久没调出来，蛋疼的紧。后来专业前端过来看了一会儿，加了个position和display就好了，看的我一脸懵逼。这些位置属性不总结真的难记，好多次被它搞迷糊，是时候好好总结下了：position1.position大家应该都不陌生，可以选用以下的值：》a

html中position标签的属性

03-16

HTML中position标签的属性是用来控制元素的定位方式的。常见的属性有： 1. static：默认值，元素按照文档流排列，不受其他定位属性影响。 2. relative：相对定位，元素相对于自身原来的位置进行定位，可以通过top...