position:relative

最新推荐文章于 2022-07-16 10:52:41 发布
转载 最新推荐文章于 2022-07-16 10:52:41 发布 · 120 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/vivianlai/archive/2011/11/23/2260002.html

本文详细介绍了网页定位的四种方式：static（无特殊定位）、absolute（绝对定位）、relative（相对定位）和fixed（固定定位）。解释了每种定位方式的特点、属性及其在布局中的应用。

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

static : 　无特殊定位，对象遵循HTML定位规则 
absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框 
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 
fixed : 　IE5.5及NS6尚不支持此属性 

转载于:https://www.cnblogs.com/vivianlai/archive/2011/11/23/2260002.html

CSS中关于position的理解
weixin_44698457的博客
03-01 607
absolute 当 position=absolute 时，div按照 block的效果显示出来，脱离了文档流，通过指定left和top属性值来表示出位置。若当前div没有position=relative的父级div时，该div按照body的左上角来表示。即， <div style="width:100px;height:100px; background-color:black; ...
关于定位position的理解
06-15 228
本文学习记录主要参考https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/%E5%AE%9A%E4%BD%8D position属性可能的取值有下面几个，这篇文章主要记录了前4个的理解。 值描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元...
有关position的一些理解
qq_40057364的博客
10-20 383
css中关于positon的属性一般分为以下几种首先 1.static 在css中该看挺属性为默认属性该属性最大的特点在于它并没有top，bottom，Left ，right属性同时随着信息流的输入它的位置将产生变化宛如积木一样，随着越来越多的static的添加而移动，最重要的特点是无以上4种属性. 2.relative relative.又称相对布局，它在多数情况下与Static的功能相近，与static区别最大的一点在于relative拥有Static所没有的top,bottom,left,right四
对于position的理解
aiua81263的博客
09-23 262
原文上课整理于有道云笔记 搬运有一点点麻烦，就直接截图了撒 转载于:https://www.cnblogs.com/kazama/p/9693985.html
position理解笔记
weixin_30341735的博客
06-15 181
什么是文档流？将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。 静态定位(static) ： static，无特殊定位，它是html元素默认的定位方式，即我们不设定元素的position属性时默认的position值就是static， 它遵循正常的文档流对象，对象占用文档空间，该定位方式...
对position的几点理解
阿留申低压的博客
08-01 974
分类及定义在W3C中，position 属性规定元素的定位类型，css实例：.box{ position：relative; } 它可能的值包括以下五种： absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及”bottom” 属性进行规定。 fixed（固定定位）：生成绝对定
css中position:relative和overflow:hidden之间的问题
09-25
在本问题中，我们主要关注`position:relative`和`overflow:hidden`之间的交互，以及在不同浏览器（尤其是IE6和IE7）中的表现差异。 `position`属性用于定义元素的定位模式，它有多种值，如`static`（默认值）、`...
CSS中的position:relative;的作用示例介绍
12-10
在你的问题中，你特别关注了`position:relative;`的作用，这是一个基础且实用的定位方式。下面我会详细解释`position:relative;`以及与之相关的其他定位方式。 首先，我们来看`position`属性的四种主要值： 1. **...
IE7 position:relative的问题
12-02
标题中的“IE7 position:relative的问题”指的就是在IE7浏览器中使用`position:relative`时出现的异常行为。描述中提到，当一个元素设置了`position:relative`，为了在IE7中使其正常工作，通常还需要它的父容器也...
如何用float配合position:relative实现居中
09-25
在这个场景下，`float`与`position:relative`结合使用可以达到预期的居中效果，而避免使用对这些老版本IE浏览器支持不理想的`display:inline-block`。以下我们将详细探讨这种实现方法。 首先，我们了解`float`属性...
Position
2197
07-18 1267
static：默认值，表示没有定位，块级元素和行内元素按照各自的特性进行显示 relative:相对定位,元素相对于原本位置的定位，元素不脱离文档流，位置会被保留，其他的元素位置不会受到影响，不会改变元素的display属性 absolute：绝对定位，相对于static以外的第一个父元素进行定位，如何不存在这样的包含块则相对于body进行定位。脱离文档流，并改变了display属性，元素本身...
position定位个人理解详解
luoxiaonuan_hi的博客
07-16 151
定位
【CSS】我理解的position
Catherine_G的博客
08-26 428
注：本文是《CSS权威指南》的学习笔记 文章目录static：relative：absolute：fixed：包含块：偏移属性：总结绝对定位：absolute固定定位：fixed相对定位：relative position：用于定位 static： 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relative： 元素框偏移某个距离...
position的一些不一样的理解
Allenyhy的博客
08-11 335
position的取值有4个，分别为：static, relative, absolute, fixed; 默认为static，这个没什么问题！！ relative：相对自己的位置偏移 absolute:相对于最近的非static的父类元素进行定位 fixed:相对于浏览器视窗定位   绝对定位元素： 如果position不是static或者relative，那就是绝对定位元素  ...
你真的理解position？
Mmzer的专栏
03-05 476
对于position的各个属性，具体如下： 值 描述 static 默认。位置被设置为static的元素，它始终会处于页面流给予的位置（一个static元素会忽略任何top、bottom、left或right声明）。 relative 位置被设置为relative的元素，可将其移至相对于其正常位置的地方，因此"le
position个人实践理解
Iamgoodgilr的博客
08-30 624
常用的position属性使用： position:absolute/relative/fixed position:absolute 如果是单独存在，父级没有进行定位的话，它就是相对于boby可以放置页面上任何位置。元素处于浮动状态，不影响别的元素。 position:relative  如果给元素加上这个属性的话，表示元素相对与原来本身位置布局。 比如说left：20px；
position定位使用理解
草灯的专栏
05-07 1444
从前端那边拿到一份稿件，发现其中一个模块，使用大量的position定位，虽然没有错位，但是总觉得没有必要使用，因为我之前自己有写过一段时间的前端开发，所以我考虑了下把大部分的都注释掉了，但是有个鼠标经过的特效也是用定位，可是他的电脑展示的刚好是在小图标正上方，等到了我电脑发现却右移了很多像素！！         刚开始以为是inline行内化的原因，后来经过多方排除，发现竟然不能吧relati
css之定位（position的自我理解）
stephenli300203的博客
04-04 489
序言 最近看朋友写的一个浮动样式，float在父元素绝对定位时无法清除浮动，所以就感觉自己对定位的理解有点浅了，所以重新了解一下。 一、定位 首先定位的作用：它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。 页面正常时标准流式布局 ...
CSS3理解position属性
粥要熬。
08-09 8551
一般情况下，页面是由页面流构成的。页面元素在页面流中的位置是由该元素在HTML文档中的位置决定的。块级元素从上向下排列（每个块级元素单独成行），而内联元素将从左向右排列，元素在页面中的位置随着外层容器的改变而改变。 在CSS中，提供了三种定位机制：普通流、定位（position）、浮动（float）。position属性 ：可以将元素从页面流中偏移或分离出来，然后设定其具体位置，从而实现更精确的定位
position：relative
最新发布
09-06
position: relative是CSS中的一个属性，用于相对定位元素。相对定位是根据元素在正常页面流中的位置来进行定位。相对于元素在文档流中的原始位置，使用top、left、bottom、right这四个属性可以将元素上下左右移动。相对定位不会使元素脱离文档流，而且会影响元素的其他兄弟元素。相对定位可以通过设置position属性的值为relative来实现。相对定位通常是在设置position:absolute的父元素上使用，这样子元素就会相对于父元素进行定位。如果没有设置position:relative的父元素，那么相对定位会逐层向上寻找设置了position:relative的元素边界，直到body元素。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值