excel 表格 做的网站,帮做网站,岳阳做网站推荐,市桥做网站的公司目录 CSS定位为什么需要定位定位组成定位的叠放顺序拓展 CSS定位
为什么需要定位
浮动可以让多个块级盒子一行没有缝隙排列显示#xff0c;经常用于横向排列盒子定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置#xff0c;并且可以压住其他盒子
定… 目录 CSS定位为什么需要定位定位组成定位的叠放顺序拓展 CSS定位
为什么需要定位
浮动可以让多个块级盒子一行没有缝隙排列显示经常用于横向排列盒子定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置并且可以压住其他盒子
定位组成
将盒子定在某个位置也是在拜访盒子 定位 定位模式 边位移 定位模式用于指定一个元素在文档中的定位方式边偏移则决定了该元素的最终位置 定位模式属性position 边偏移属性
静态定位static了解: 按标准流特性定位无边偏移量用的少 语法格式
选择器 {positionstatic;
}相对定位relative重要 特点 ① 移动位置时相对于它原来的位置 ② 原来在标准流的位置继续占有即不脱标保留原来位置 语法格式
选择器 {positionstatic;
}eg
div {positionstatic;//意思为相对于原来的位置向下移动100像素top:100px;
}绝对定位absolute重要 在移动时相对于它的祖先来说 语法格式
选择器 {positionabsolute;
}特点 ① 如果没有父元素或祖先元素没有定位则以浏览器为准定位 ② 如果祖先元素有定位相对、绝对、固定定位则以最近一级的有定位的祖先元素为参考点移动位置 ③ 绝对定位不再占有原来的位置即脱标
子绝父相 子级是绝对定位的话父级要用相对定位 ① 子级绝对定位不会占有位置可以放到父盒子里面任意一个地方不影响其他兄弟盒子 ② 父盒子要加定位限制子盒子在父盒子内显示 ③ 父盒子布局时需要占有位置因此父亲只能是相对定位 如果父盒子不需要占有位置时也会用到子绝父绝 4. 固定定位fixed重要 元素固定在浏览器可视区的位置 特点 ① 以浏览器的可视窗口为参照点移动元素和父元素没关系不随滚动条滚动 ② 脱标不保留原来位置 小技巧固定在版心右侧位置 ① 让固定定位的盒子left50%走到浏览器可视区的一半位置 ② 让固定定位的盒子margin-left版心宽度一般的距离多走版心宽度一半的位置 5. 粘性定位sticky了解 可以被认为是相对定位和固定定位的混合 ① 以浏览器的可视窗口为参照点移动元素 ② 不脱标保留原来位置 ③ 必须添加top、left、right、bottom其中一个才有效 兼容性差IE不支持 6. 总结
定位的叠放顺序
使用z-index控制盒子的前后次序x轴 tips
数值可以是正、负整数或0默认是auto数值越大盒子越靠上如果数值相同则后来者居上数字后不能加单位只有定位的盒子才有z-index属性 语法格式
选择器 {z-index: 1;
}拓展
绝对/固定定位的盒子居中 加了绝对定位的盒子不能通过margin:0 auto;水平居中 语法格式
选择器 {position: absolute;left: 50%;margin-left: -45px;width: 90px;height: 90px;
}定位特殊特性 ① 行内元素添加绝对或固定定位可直接设置宽度和高度 ② 块级元素添加绝对或固定定位宽度和高度默认是内容的宽度和高度脱标的盒子不会触发外边距塌陷问题决定定位、固定定位会完全压住盒子 浮动只会压住它下面的盒子不会压住文字可做文字环绕但定位会压住文字
