浅谈position:relative

最新推荐文章于 2023-06-04 22:58:06 发布
最新推荐文章于 2023-06-04 22:58:06 发布
阅读量327 收藏
点赞数
原文链接：http://www.cnblogs.com/kendyjack/archive/2012/09/01/2666932.html
版权 
<!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

weixin_30292843
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
相对定位——position: relative
weixin_48796690的博客
10-09 214
相对定位——position: relative
浅谈css position absolute相对于父元素的设置方式
12-14
标题和描述中提到的方法是将父元素的`position`属性设置为`relative`。这并不会改变父元素在正常流中的位置，但是它会为它的子元素提供一个定位上下文。在HTML和CSS示例代码中，`#father`被设置为`position: ...
神奇的position:relative;
weixin_34408717的博客
07-17 284
我承认我又标题党了，这里想说的是相对定位的设置有时候会起决定性的作用，比如在是否随滚动条移动时的控制。 先上两个示例： position:static; .parent{ display:block; /*position:relative;*/ width:200px; height:100px; overflow:auto; background:lightblue; } .pa...
position:relative 的深入理解，欢迎探讨
mixer_a的专栏
05-25 336
对于css中的position:relative;我始终搞不明白它是什么意思，有什么作用？ 对于position的其它几个属性，我都搞懂了 引用 static : 　无特殊定位，对象遵循HTML定位规则 absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边...
position：relative
热门推荐
weixin_44874595的博客
07-30 4万+
1.当将块的position属性设置为relative时，与设置为absolute完全不同，这时子块是相对于其父块来作为参照对象偏移定位，而不是相对于浏览器窗口，并且相对定位的块元素脱离标准流浮上来后，无论是否进行移动，其所占的位置仍然留有空位，后面的无定位块元素不会移动上来，因此，移动元素会导致覆盖其它框。 <!DOCTYPE html> <html lang="en">...
position之relative
lbs311709000127的博客
01-18 6550
position：relative 作用：是元素成为containing-block，可定位的祖先元素。意思就是绝对定位是的参照元素 特点： 可以使用top|right|bottom|left|z-index进行相对定位，相对的是常规流中自己的位置。 相对定位元素不会离开常规流，意思就是其原来的位置还在，不会被其他后面的元素占有 任何元素都可以设置为relative，...
浅谈CSS中display/float/position属性值的相互影响
09-24
其主要值有`static`（默认值，遵循正常文档流）、`relative`（相对于其原本的位置进行定位）、`absolute`（相对于最近的非`static`定位祖先元素定位）和`fixed`（相对于浏览器窗口定位，即使在滚动时也保持位置不变...
浅谈css元素居中
09-24
2. **设置包裹元素的`position`属性**：将其`position`设置为`relative`，并将`top`和`left`值设为50%。 3. **应用`transform`属性**：给浮动元素添加样式`transform: translate(-50%, -50%);`，这将使元素相对于...
浅谈css处理水平居中的问题
09-24
首先，设置`position: relative`，然后设置`left: 50%`。为了补偿偏移，还需要使用负的`transform`属性。例如： ```css .relative-element { position: relative; left: 50%; transform: translateX(-50%); } ...
浅谈CSS编程中的定位问题
09-25
2. position:relative - 相对定位允许元素相对于其在常规文档流中的正常位置进行偏移，这通过top、right、bottom、left四个属性来实现。相对定位的元素依然保留其在文档流中的空间，而且不会脱离文档流，即使它被...
Position属性之relative用法
evilcry2012的专栏
11-24 2万+
Position属性之relative用法 投稿：mrr 字体：[增加 减小] 类型：转载 时间：2015-12-14 我要评论 Relative是position的一个属性，是相对定位，通过本篇文章给大家介绍Position属性之relative用法，对position属性relative相关知识感兴趣的朋友一起学习吧 Relat
position:relative 详解
湛庐无方
03-04 6099
position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位. relative和absolute的另外一个很重要的区别就是当被定义成absolute的对象被移出了，那么他原来的位置也就不存在了， 如果被定义成rela
position各种
u010985901的专栏
08-21 108
[code="java"] position的默认值是static，（也就是说对于任意一个元素，如果没有定义它的position属性，那么它的position:static） 如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该给#demo相对定位，#sub绝对定位。 absolute是相对于自己最近的父元素来定位的，如果你不给#demo相对...
CSS属性详解——position:relative
最新发布
Wod_7的博客
06-04 5759
CSS中的相对定位relative定位是一种定位方式，与绝对定位absolute定位不同的是，相对定位是根据元素在正常页面流中的位置来定位。相对定位使元素相对于其原始位置上下左右移动。这个过程并不会使元素脱离文档流。
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 1344
一、相对定位 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 5571
 CSS定位的原理把浏览器窗口想象成一个坐标系统：CSS定位的原理是：你可以将任何盒子（box）放置在坐标系统的任何位置上。采用CSS定位技术来放置元素是非常精确的。相对于使用表格、透明图像或其他方法而言，CSS定位要简单得多。 绝对定位一个采用绝对定位的元素不获得任何空间。这意味着：该元素在被定位后不会留下空位。要对元素进行绝对定位，应将position属性的值设为a
13.相对定位(position:relative)
前端学习笔记
04-18 459
微调元素位置，相对自己原来的位置进行定位，上下移左右移。必须先声明要相对定位，position:relative不脱标，老家留坑，形影分离不脱离标准文档流，下面的盒子不会钻入其原位置下方 原始位置依然占有，不会有其他元素填充 其真实物理位置依然是原位置，用margin-bottom时其原位置的下方盒子会下移。本质说其物理位置依然位于原标准流位置，新位置为渲染出来的的一个位置，影子 用途1...
定位之——相对定位（relative）与绝对定位（absolute）
weixin_y18485705761的博客
05-24 3288
对于相对定位与绝对定位这是很重要的知识点，前端学的怎样也是看你的定位学的怎样，他影响了你的整个页面的排版与布局，废话不多说让我们来看看相对定位和绝对定位吧。position 属性规定元素的定位类型。
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、付费专栏及课程。

余额充值