`
akunamotata
  • 浏览: 373507 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

CSS里面position:relative与position:absolute 区别

阅读更多
position:absolute这个是绝对定位


是相对于浏览器的定位。

比如:position:absolute;left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。

position:relative是相对定位


是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。

比如:<div class="1"></div><div class="2"></div>

当1固定了位置。1的样式float:left;width:100px; height:800px;
2的样式为float:left; position:relative;margin-left:20px;width:50px;
2的位置在1的右边,距离120px 
分享到:
评论

相关推荐

    CSS中的position:relative;的作用示例介绍

    CSS中的position:relative是控制元素相对定位的,relative 不脱离文档流而absolute 脱离文档流,relative 的元素尽管表面上看到它偏离了原来的位置,但它实际上在文档流中还是没变

    CSS中的position 的值: absolute 与 relative

    NULL 博文链接:https://rainbow702.iteye.com/blog/1703317

    css position: absolute、relative详解

    今天在看CSS的时候遇到了position: absolute、relative的问题,一直比较迷糊,今天终于搞清楚了。

    CSS使用position:sticky 实现粘性布局的方法

    前面写了一篇文章讲解了position常用的几个属性:《CSS基础篇– position属性讲解》 一般都知道下面几个常用的: { position: static; position: relative; position: absolute; position: fixed; } 在...

    IE6 CSS高度height:100% 计算失效/无效

    样式复制代码代码如下:#demo{position:relative;width:300px;border:1px solid #090;}#demo div{position:absolute;width:200px;height:100%;background-color:#f00;} 结构 复制代码代码如下:”demo”&gt; &lt;div&gt;...

    IE7 position:relative的问题

    回想在网上看过的一篇文档,大意就是,如果在IE7中使用position:relative属性,需要在该元素的容器上,同时给予position:relative属性。 我给了。大按钮上的链接都恢复了。但是”css”"js”"seo”3个小按钮上没有...

    css的position里的relative和absolute的区别.docx

    css的position里的relative和absolute的区别.docx

    JQuery和html+css实现带小圆点和左右按钮的轮播图实例

    是的!你没看错!还是轮播图。这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白... position:relative; } .img_box img{ width:100%; position:absolute; } .ul5{ list-style: none; position:absolute

    CSS之Position详解

    CSS之Position详解 CSS的很多其他属性大多容易理解,比如字体,文本,背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑。CSS中主要难以理解的...

    scrollbar_js实现竖向滚动条

    .box-163css{position:relative;height:330px;border:solid 1px #ddd;width:600px;margin:20px auto;} .picul{ width:100%; float:left;} .picul li{ width:115px; height:115px; float:left; margin:0 7px 25px 7px...

    CSS完美解决前端图片变形问题的方法

    在头条IT学堂看到CSS完美解决前端图片变形问题的文章,就记录分享下: 一、让图片的宽度或者高度等于容器... position: relative; } img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: tra

    JQuery+CSS实现图片上放置按钮的方法

    position:relative日常应用的时候一般是设置给position:absolute;的父层的, 父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了...

    深入理解css中position属性及z-index属性(推荐)

    position属性共有四种不同的定位方法,分别是static、fixed、relative、absolute。最后将会介绍和position属性密切相关的z-index属性。 第一部分:position: static static定位是HTML元素的默认值,即没有定位,元素...

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

    原来只明白position:relative是相对定位,position:absolute 是绝对定位; 经常看到图片轮播的下方有个半透明背景的文字描述。我现在要做这样一个效果,因为不是轮播,所以没去找插件,想自己写。 半透明背景可以...

    使用CSS的position属性控制页面布局的入门教程

    position: absoluteposition: relativeposition: fixedposition: staticposition: inherit本文主要详细讨论 position 属性的前三个值,首先大概讲解下后两个值: static static 为 position 属性的默认值,static ...

    关于CSS position属性值absolute,relative的解释.zip

    关于CSS position属性值absolute,relative的解释.zip

    详解CSS中position属性介绍(新增sticky)

    position的含义是指定位类型,取值类型可以有:static、relative、absolute、fixed、inherit和sticky,这里sticky是CSS3新发布的一个属性。 1、position: static static(没有定位)是position的默认值,元素处于正常...

    仿魅族官网(HTML+CSS)静态界面

    本次设计魅族官网主要运用...多出使用了定位元素position: relative;——position: absolute;使用了多个:hover效果来实现变化。能够巩固熟悉浮动、相对定位,绝对定位、下拉列表、hover效果、整体缩放等知识点的用法。

    借助CSS定位来实现把一个DIV放到另一个div右下角

    借助CSS定位来实现,你将右下角的那个DIV放在另一个DIV里面,参考代码如下示: 复制代码代码如下: ”box1″&gt; ”box2″&gt;测试内容&lt;/div&gt; &lt;/div&gt; &lt;style&gt; &lt;!– #box1{width:600px;height:600px;background:...

Global site tag (gtag.js) - Google Analytics