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);
}



  

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

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

学了C编码实践之后,我个人在代码层面对软件工程的理解

《软件工程(C编码实践篇)》MOOC课程http://mooc.study.163.com/course/USTC-1000002006                        姓名:何燏林,...

理解Jquery 的offset与position方法

  • 2011年03月10日 10:03
  • 17KB
  • 下载

自己动手写操作系统--个人实践

最近开始看于渊的《自己动手写操作系统》这本书,刚开始看就发现做系统的引导盘竟然是软盘!心里那个汗啊!现在都是U盘了,谁还用软盘。于是考虑用U盘。于是开始以下步骤:1、既然书上说给先要把软盘做引导盘,那...
  • charcy
  • charcy
  • 2011年03月07日 20:18
  • 30159

【开坑】个人网站建设记录 及Markdown使用实践

【13.11.2017】 购买域名 时长一年 竟然有 .xin的域名 he.xin死贵买不起 sxhe.xin就便宜很多 其实先买的是 .我爱你域名 暂时不考虑建站,没那个技术和时间,还有就...
  • sxhexin
  • sxhexin
  • 2017年11月23日 15:05
  • 58

elk实时日志分析平台部署搭建详细实现过程:加上个人实践意见,及如何避坑

1、ELK平台介绍 在搜索ELK资料的时候,发现这篇文章比较好,于是摘抄一小段:以下内容来自: http://baidu.blog.51cto.com/71938/1676798 日志主要包括系...

2012年敏捷个人俱乐部(北京)实践团开始报名了......

敏捷个人是一个关注个人成长的框架、社区、品牌,在2011年我们进行了线上敏捷生活练习,从4月份开始每月1-2次线下沙龙活动,这是今年线下活动的报道,不了解的可以看看: 敏捷个人2011.12...
  • zhoujg
  • zhoujg
  • 2011年12月23日 16:04
  • 1952

【个人网站搭建实践】cloud deploy——云部署问题实录

【前言】 好久没有在csdn上动笔,也真实着实想大家了。 正好这次自己买了个云服务器,弄了个域名。 可以把这次的经历给大家分享下。...

谈谈个人对SnmpSharpNet的实践经验

本文的目的 鉴于网上没有使用该开发包的详尽说明,我在这里就讲述一下自己的经验之谈。说明一下,我发现有些人很喜欢纠结于一些不太有意义的事而不花时间去钻研那些很难很有深度的问题。在这里我先声明我只谈...
  • ksp416
  • ksp416
  • 2015年09月09日 10:46
  • 391
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:position个人实践理解
举报原因:
原因补充:

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