Web开发中常用的定位布局position
2017-07-12 15:50
218 查看
定位布局就是为开发提供了更好的布局方式,可以根据需求给相应的模块设定相应位置,从而使界面更佳丰富,代码更佳完美。
position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。
position 属性,它有4个不同类型的定位,这些类型会影响元素的生成方式,下面我们详细说明position属性。
通过案例介绍其四个属性,效果如图:
代码:
通过以上代码,可以是你更方便,更容易的学习CSS的position属性,希望对你有所帮助。
position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。
position 属性,它有4个不同类型的定位,这些类型会影响元素的生成方式,下面我们详细说明position属性。
static 定位
是静态定位,是position的默认值,元素出现在正常的流中(正常布局),静态定位的元素不会受到 top, bottom, left, right影响。fixed 定位
与absolute一致,但定位是以窗口为参考。当出现滚动条时,对象不会随着滚动,相当于位置设置之后,以浏览器未参考,他是不会改变的,可用于做界面广告(我们浏览网页是的广告,大多数都在一个位置)。
relative 定位
相对定位,他是默认参照父级的原始点为参考点,通过top,left,bottom,right这4个定位偏移属性进行偏移,不会影响常规流中的任何元素。absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于最初的包含块。通过案例介绍其四个属性,效果如图:
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>position</title> </head> <style type="text/css"> *{margin: 0px 0px;padding: 0px 0px;} .header{ height:95px; background: green; } .main{ height: 255px; background: wheat; } p{ position: static;/*不会受到 top, bottom, left, right影响*/ top: 11px;/*设置了没影响*/ } .three{ width: 155px; height: 155px; position: fixed;/*固定定位相对于父div 如广告在上面一样*/ right: 16px; top: 155px; background-color: green; z-index: 2;/*层的覆盖关系值越高越在上面*/ } /*相对父级div class=main来布局(没有则按照 body来布局)*/ .one{ position: relative; width: 199px; height: 115px; top: 25px; left: 25px; background: red; color: white; } /*相当于浏览器窗口来布局*/ .tow{ position: absolute; width: 196px; height: 55px; top: 15px; left: 55px; background: gold; } h1{ margin-bottom: 25px; } </style> <body> <div class="header"> header </div> <p>static 正常布局 没有其他影响</p> <div class="main"> <div class="one">我是relative 相对布局 相对父级div class=main来布局(没有则按照 body来布局)</div> <div class="tow">我是absolute 绝对布局 相当于浏览器窗口来布局</div> <div class="three">fixed:我是广告,我永远不会动,拖滚动条我也不动</div> </div> <h1>我是文本</h1> <h1>我是文本</h1> <h1>我是文本</h1> <h1>我是文本</h1> <h1>我是文本</h1> <h1>我是文本</h1> <h1>我是文本</h1> <h1>我是文本</h1> <h1>我是文本</h1> <h1>我是文本</h1> <h1>我是文本</h1> <h1>我是文本</h1> <h1>我是文本</h1> <h1>我是文本</h1> <h1>我是文本</h1> </body> </html>
通过以上代码,可以是你更方便,更容易的学习CSS的position属性,希望对你有所帮助。
相关文章推荐
- Web开发中常用的定位布局position
- CSS布局最常用属性float(浮动)和position(定位)
- 移动端web开发之坑--自适应布局下的返回页面位置定位问题
- CSS布局最常用属性float(浮动)和position(定位)
- 百分比定位加position定位的常用布局
- Web开发中常用的定位布局position
- web开发中常用的、做成cs文件的js代码
- 开发WEB比较常用的JS技术
- WEB程序开发常用小工具包
- WEB编程开发常用的代码
- [导入]一些web开发中常用的、做成cs文件的js代码 - 搜刮来的
- WEB编程开发常用的代码
- Web开发常用小技巧 -- JavaScript[不断添加中...]
- WEB编程开发常用的代码
- web常用开发技术 40种js技巧
- 一些web开发中常用的、做成cs文件的js代码 - 搜刮来的
- Web项目开发常用基础知识集锦
- WEB程序开发常用小工具包
- WEB编程开发常用的代码
- WEB编程开发常用的代码