分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

css定位

发布时间:2023-09-06 01:16责任编辑:顾先生关键词:暂无标签

定位属性:使元素脱离正常的文档流,“漂浮”在指定的位置上的css属性。

position:设置定位属性的方式。

  • relative: 相对定位,对象遵循普通流,当前元素参照父元素的左上角进行位置偏移。
  • absolute:绝对定位,对象脱离普通流,当前元素偏移属性参照的是离自身最近的相对定位元素,如果没有相对定位的元素,则一直追溯到文档。
  • fixed:与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。
  • static:对象遵循常规流(默认值)。
 1 <style type="text/css"> 2 ????div{ 3 ????????border: 2px black solid; 4 ????????width: 300px; 5 ????????height: 400px; 6 ????} 7 ????#over{/* 绝对定位absolute */ 8 ????????position: absolute; 9 ????????left: 100px;10 ????????top: 200px;11 ????}12 ????#container{/* 相对定位relative */13 ????????position: relative;14 ????????left: 500px;15 ????????top: 100px;16 ????}17 ????#tips{/* 相对窗口定位fixed */18 ????????position: fixed;19 ????????left: 900px;20 ????????top: 10px;21 ????}22 </style>23 </head>24 <body>25 ????<div id="over">div1</div>26 ????<div id="container">div2</div>27 ????<div id="tips">div3</div>28 </body>

要使某个元素脱离文档流,“漂浮”在指定位置上用position:absolute。

多个元素堆叠在一起,进行不同的显示需要两者配合使用。z-index的值可以为负。

css定位

原文地址:http://www.cnblogs.com/-maji/p/7647316.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved