决定定位后,margin:auto失效 可以用百分比 left:50%
.box { /* 1. 绝对定位的盒子不能使用左右margin auto居中 */ position: absolute; /* margin: 0 auto; */ /* left: 50%, 整个盒子移动到浏览器中间偏右的位置 */ left: 50%; /* 把盒子向左侧移动: 自己宽度的一半 */ /* margin-left: -150px; */ top: 50%; /* margin-top: -150px; */ /* 位移: 自己宽度高度的一半 */ transform: translate(-50%, -50%); width: 400px; height: 300px; background-color: pink; }
<div class='box'>
固定定位
子绝父想
.father{position:relative}
.son{
position:absolute
}
position:fixed //脱标 不占位置
位置相对于浏览器框的 行内块
元素成级关系
标准< 浮动<定位
如果 是默认情况下,标签的书写是后来者居上
可以加入z-index:1 //层级关系啊,必须配合定位才可以生效
<style> div { width: 200px; height: 200px; } .one { position: absolute; left: 20px; top: 50px; z-index: 1; background-color: pink; } .two { position: absolute; left: 50px; top: 100px; background-color: skyblue; } /* 默认情况下, 定位的盒子 后来者居上 , z-index:整数; 取值越大, 显示顺序越靠上, z-index的默认值是0 注意: z-index必须配合定位才生效 */ </style> </head> <body> <div class="one">one</div> <div class="two">two</div> </body> </html>
光标
cursor:default 默认箭头
pointer 小手
text 工字形
move 十字光标