浅谈position:relative

最新推荐文章于 2025-05-17 10:21:20 发布
转载 最新推荐文章于 2025-05-17 10:21:20 发布 · 389 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/kendyjack/archive/2012/09/01/2666932.html

本文介绍了CSS中使用position:relative属性对元素进行定位的方法及其对页面布局的影响。通过具体实例展示了如何使元素在保持原有布局的同时实现相对定位。 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
    *{margin:0;padding;0;}
    .main{overflow:hidden;position:relative;height:200px;}
    .box{width:5000px;position:absolute;height:200px;background:#f40;top:0;left:0;}
    ul li{float:left;display:inline;width:98px;border:1px solid #f40;}
    .li1{left:500px;position:relative;}
    
    </style>
</head>
<body>
<div class="main">
    <div class="box">1</div>
</div>
<ul>
    <li class="li1">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>    
</body>
</html>

一个Element用了position:relative，会占用空间，并能“漂浮”到其他位置

转载于:https://www.cnblogs.com/kendyjack/archive/2012/09/01/2666932.html

浅谈css position absolute相对于父元素的设置方式
12-14
标题和描述中提到的方法是将父元素的`position`属性设置为`relative`。这并不会改变父元素在正常流中的位置，但是它会为它的子元素提供一个定位上下文。在HTML和CSS示例代码中，`#father`被设置为`position: ...
浅谈CSS中display/float/position属性值的相互影响
09-24
其主要值有`static`（默认值，遵循正常文档流）、`relative`（相对于其原本的位置进行定位）、`absolute`（相对于最近的非`static`定位祖先元素定位）和`fixed`（相对于浏览器窗口定位，即使在滚动时也保持位置不变...
position:relative 的深入理解，欢迎探讨
mixer_a的专栏
05-25 410
对于css中的position:relative;我始终搞不明白它是什么意思，有什么作用？ 对于position的其它几个属性，我都搞懂了 引用 static : 　无特殊定位，对象遵循HTML定位规则 absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边...
position：relative
热门推荐
weixin_44874595的博客
07-30 5万+
1.当将块的position属性设置为relative时，与设置为absolute完全不同，这时子块是相对于其父块来作为参照对象偏移定位，而不是相对于浏览器窗口，并且相对定位的块元素脱离标准流浮上来后，无论是否进行移动，其所占的位置仍然留有空位，后面的无定位块元素不会移动上来，因此，移动元素会导致覆盖其它框。 <!DOCTYPE html> <html lang="en">...
神奇的position:relative;
weixin_34408717的博客
07-17 343
我承认我又标题党了，这里想说的是相对定位的设置有时候会起决定性的作用，比如在是否随滚动条移动时的控制。 先上两个示例： position:static; .parent{ display:block; /*position:relative;*/ width:200px; height:100px; overflow:auto; background:lightblue; } .pa...
position之relative
lbs311709000127的博客
01-18 6756
position：relative 作用：是元素成为containing-block，可定位的祖先元素。意思就是绝对定位是的参照元素 特点： 可以使用top|right|bottom|left|z-index进行相对定位，相对的是常规流中自己的位置。 相对定位元素不会离开常规流，意思就是其原来的位置还在，不会被其他后面的元素占有 任何元素都可以设置为relative，...
position:relative 详解
湛庐无方
03-04 6453
position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位. relative和absolute的另外一个很重要的区别就是当被定义成absolute的对象被移出了，那么他原来的位置也就不存在了， 如果被定义成rela
浅谈css处理水平居中的问题
09-24
首先，设置`position: relative`，然后设置`left: 50%`。为了补偿偏移，还需要使用负的`transform`属性。例如： ```css .relative-element { position: relative; left: 50%; transform: translateX(-50%); } ...
浅谈css元素居中
09-24
2. **设置包裹元素的`position`属性**：将其`position`设置为`relative`，并将`top`和`left`值设为50%。 3. **应用`transform`属性**：给浮动元素添加样式`transform: translate(-50%, -50%);`，这将使元素相对于...
浅谈CSS编程中的定位问题
09-25
2. position:relative - 相对定位允许元素相对于其在常规文档流中的正常位置进行偏移，这通过top、right、bottom、left四个属性来实现。相对定位的元素依然保留其在文档流中的空间，而且不会脱离文档流，即使它被...
CSS- 4.2 相对定位（position: relative）
最新发布
HRDMN的博客
05-17 1546
本文讲述相对定位（position: relative）是CSS定位属性中的一种，它允许元素相对于其正常文档流中的位置进行偏移，同时保留其在文档流中的原始空间。相对定位的元素会保留原始空间，位置只是相对于自身的偏移，且不影响其他元素。下面跟小编开始今日的练习吧！
操作元素之修改样式属性
leechoy
06-12 830
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
Position属性之relative用法
evilcry2012的专栏
11-24 2万+
Position属性之relative用法 投稿：mrr 字体：[增加 减小] 类型：转载 时间：2015-12-14 我要评论 Relative是position的一个属性，是相对定位，通过本篇文章给大家介绍Position属性之relative用法，对position属性relative相关知识感兴趣的朋友一起学习吧 Relat
position各种
u010985901的专栏
08-21 176
[code="java"] position的默认值是static，（也就是说对于任意一个元素，如果没有定义它的position属性，那么它的position:static） 如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该给#demo相对定位，#sub绝对定位。 absolute是相对于自己最近的父元素来定位的，如果你不给#demo相对...
【转】Position定位：relative | absolute
aixin8756的博客
12-08 209
转自 http://hi.baidu.com/763843175/blog/item/4955a752c64cd40b3b2935f3.html 定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。 定位的定义：在CSS中关于定位的内容是： position:relat...
position:relative的用法
波西塔塔博客
12-25 1万+
position:relative日常应用的时候一般是设置给position:absolute;的父层的, 父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素… 比如要实现商品细节图展示的效果，可以使用如...
CSS-相对定位——position: relative
cym_bj
06-26 1476
一、相对定位 1、相对定位就是相对于自己以前在标准流中的位置来移动。相对定位注意点:1、相对定位是不脱离标准流的，会继续在标准流中占用一份空间。&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;定位01&lt;/ti
CSS:position:relative;的认识
天地会
03-23 5697
 CSS定位的原理把浏览器窗口想象成一个坐标系统：CSS定位的原理是：你可以将任何盒子（box）放置在坐标系统的任何位置上。采用CSS定位技术来放置元素是非常精确的。相对于使用表格、透明图像或其他方法而言，CSS定位要简单得多。 绝对定位一个采用绝对定位的元素不获得任何空间。这意味着：该元素在被定位后不会留下空位。要对元素进行绝对定位，应将position属性的值设为a
CSS属性详解——position:relative
Wod_7的博客
06-04 6694
CSS中的相对定位relative定位是一种定位方式，与绝对定位absolute定位不同的是，相对定位是根据元素在正常页面流中的位置来定位。相对定位使元素相对于其原始位置上下左右移动。这个过程并不会使元素脱离文档流。
position:static 和 position:relative
04-29
`position:static` 和 `position:relative` 是 CSS 中的定位属性，它们可以用来控制元素在页面中的位置。 `position:static` 是默认的属性值，它表示元素在文档流中的位置，并且不会被其他元素覆盖。如果给一个元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值