position个人实践理解

原创 2016年08月30日 16:00:01

常用的position属性使用:

position:absolute/relative/fixed,默认状态下是static。

position:absolute 如果是单独存在,父级没有进行定位的话,它就是相对于boby可以放置页面上任何位置。元素处于浮动状态,不影响别的元素。

position:relative  如果给元素加上这个属性的话,表示元素相对与原来本身位置布局。

比如说left:20px;top:10px.意思就是说在原来的位置上右移动20px,下移动10px。

用的比较多的就是position:absolute/relative联合使用。一般是给父元素加上position:relative,子元素加上position:absolute,这时这个子元素就不是相对于boby了,就是相对于父元素了。

<div style="position:relative">

<divstyle="position:absolute;left:20px;top:10px">aaaaaaaaaaaaaa</div>

</div>

position:fixed俩个作用

1:用于固定元素,它是相对于浏览器窗口定位,它不会受页面其他元素影响。常用的例子就是固定页面头部,底部,然后中间内容滚动啥的都不受影响。

2:弹框时背景遮罩。如果页面超过一页的时候就一定要使用position:fixed进行布局。

.mui-popup-backdrop {
position: fixed;
z-index: 998;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.4);
}



  

position:relative 的深入理解,欢迎探讨

对于css中的position:relative;我始终搞不明白它是什么意思,有什么作用? 对于position的其它几个属性,我都搞懂了 引用 static :  无特殊定位,对象...
  • jpr1990
  • jpr1990
  • 2012年05月25日 20:39
  • 4441

Web 性能实践日志 学习

web 性能实践日志 学习
  • kylindai
  • kylindai
  • 2014年12月01日 20:29
  • 677

我的互联网价值观、方法论和个人实践(2)-个人征信

个人征信,主要分官方和企业。官方,主要是央行个人征信,有权力从银行等金融机构、百度等互联网公司拿到各种金融信息。企业,主要以BAT等大公司为主。一、央行征信官方网站:https://ipcrs.pbc...
  • FansUnion
  • FansUnion
  • 2017年09月10日 10:53
  • 332

深入理解CSS中的定位(position)

CSS中的定位(position)   使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小...
  • Neil_Wesley
  • Neil_Wesley
  • 2016年06月09日 22:36
  • 2970

position:relative和position:absolute的区别及用法

这几天在做项目时遇到做选项卡的功能时,标题和内容区域的背景颜色不同,且需要选到当前标题时,此标题下面会出现下边框及小三角边框,这样就会超出标题背景颜色需覆盖下面内容区域,这时就需要用到potition...
  • sunny327
  • sunny327
  • 2014年11月06日 09:47
  • 1457

position:relative的理解

备忘吧  以前搞样式时候没记住  用起来了又得查半天 h2.pos_left { position:relative; left:-20px } div.pos_left {...
  • wwwcomy
  • wwwcomy
  • 2015年10月13日 15:02
  • 370

css背景属性background-position如何理解?

今天在群里又有人问起css背景属性background-position,我还真的不知道如何说的,其实就是记住了w3cshool里面说的:比如,如果设置值为 50px 100px,图像的左上角将在元素...
  • huangli1030
  • huangli1030
  • 2011年05月18日 22:31
  • 434

TensorFlow学习笔记6——《面向机器智能的TensorFlow实践》StanfordDog例程修改记录

《面向机器智能的TensorFlow实践》深入浅出,将tensorflow的很多概念讲的很清楚,很适合tensorflow的初学者学习。该书完整的代码在https://github.com/backs...
  • hnxyxiaomeng
  • hnxyxiaomeng
  • 2017年11月01日 18:47
  • 349

推荐系统个人理解(实践部分)

前一篇文章简单介绍了推荐系统,并列出了常用的推荐算法,这篇主要就如何实现推荐做说明。本来最开始打算用movielens的电影数据来做推荐,数据集下载地址如下,http://grouplens.org/...
  • vs412237401
  • vs412237401
  • 2016年01月27日 14:31
  • 1141

理解 position:relative 与 position:absolute

有三个值, static (静态)、 relative (相对)、 absolute (绝对);由于 static 是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的定...
  • elf8848
  • elf8848
  • 2014年10月09日 10:32
  • 984
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:position个人实践理解
举报原因:
原因补充:

(最多只允许输入30个字)