码迷,mamicode.com
首页 > Web开发 > 详细

CSS格式与布局中三种位置的理解与应用

时间:2017-07-15 22:51:38      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:absolute   str   style   应该   osi   使用   方式   布局   广告   

  第一种位置关系:position:fixed  锁定位置(相对于整个浏览器的位置),常用在各大网站的右下角或其它位置的小广告。

如果需要调整锁定位置,需要使用如下方式:<div style="width:300px; height:300px; position:fixed; top:0px; left:0px; right:0px; bottom:0px" ></div>

  第二种位置关系:position:absolute 绝对位置(相对于父级元素--浏览器,绝对定位的上级) 

(1)最外边没有absolute,则调整时div相对于浏览器变化;(2)最外面有absolute,则调整时div相对于最外层边界变化。

如果需要调整绝对位置,需要使用如下方式:<div style="width:300px; height:300px; position:absolute; top:0px; left:0px; right:0px; bottom:0px" ></div>

  第三种位置关系:position:relative 相对位置(相对于自身应该出现的位置)

如果需要调整相对位置,需要使用如下方式:<div style="width:300px; height:300px; position:relative; top:0px; left:0px; right:0px; bottom:0px" ></div>

CSS格式与布局中三种位置的理解与应用

标签:absolute   str   style   应该   osi   使用   方式   布局   广告   

原文地址:http://www.cnblogs.com/jly144000/p/7186357.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!