定位-绝对定位
2018-09-18 06:32:53来源:博客园 阅读 ()
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>定位</title> <style media="screen"> .box1{ width:100px; height: 100px; background-color: rgb(184, 208, 162); } .box2{ width:100px; height: 100px; background-color: rgb(231, 223, 143); position: absolute; left: 100px; top: 100px; } .box3{ width:100px; height: 100px; background-color: rgb(188, 211, 213); } span{ background-color: rgb(209, 198, 209); position:absolute; } </style> </head> <body> <div class="box1"> </div> <div class="box2"> </div> <div class="box3"> </div> <span>span元素</span> </body> </html>
输出:
1.开启绝对定位,会使元素脱离文档流;
2、开启绝对定位以后,如果不设置偏移量,则元素的位置不会发生变化;
3、相对于浏览器窗口进行定位;
开启box3的定位并把box2作为box3的子元素:
.box2{ width:100px; height: 100px; background-color: rgb(231, 223, 143); position: absolute; left: 100px; top: 100px; } .box3{ width:100px; height: 100px; background-color: rgb(188, 211, 213); position: absolute; }
<div class="box3"> <div class="box2"> </div> </div>
输出:
若有祖先元素开启了定位(一般情况,开启了子元素的绝对定位都会同时开启父元素的相对定位);
绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的;
绝对定位会使元素提高一个层级;
改变元素的性质(块联元素变为内联元素);
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:使用CSS实现无滚动条滚动
下一篇:定位-固定定位
- 前端CSS五中元素定位类型 2020-06-01
- 5.通过定位实现二级菜单 2020-04-10
- 表单元素 2020-04-05
- HTML连载79-背景图片定位区域属性、背景颜色 2020-04-01
- position定位,CSS入门必备, 好像以后有个更厉害的flex! 2020-03-07
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash