div盒子的相对定位(position:relative)和绝对定位(position:absolute) |
您所在的位置:网站首页 › 哪个盒子用a31 › div盒子的相对定位(position:relative)和绝对定位(position:absolute) |
有一说一,在做搜索框,鼠标触发事件的时候要用到盒子的相对和绝对定位。 在CSS中,position:absolute;当position的值为absolute时,这个盒子就是开启了绝对定位模式。 引用来自W3C的权威解读:https://www.w3school.com.cn/css/css_positioning_absolute.asp(内容如下图) 做个例子: 列出四个盒子,标记不同颜色,不做任何定位操作。html部分 box1 box2 box3 box4css部分 body{ margin: 50px; } #main{ width: 400px; height: 150px; background-color: #888;/*灰色*/ } #box1{ width: 50px; height: 50px; background-color: #FFA939;/*橘色*/ } #box2{ width: 50px; height: 50px; background-color: #F9F3EE;/*米白*/ } #box3{ width: 100px; height: 50px; background-color: #70CDE5;/*浅蓝*/ } #box4{ width: 50px; height: 50px; background-color: #009CC6;/*天蓝*/ }页面效果如图: 给box4加上一个相对于box3的绝对定位并设置一定的偏移量。由于box4没有已定位的祖先元素,所以它的位置相对于最初的包含块也就是浏览器窗口定位。(绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。): css部分 #box4{ width: 50px; height: 50px; background-color: #009CC6;/*天蓝*/ position: absolute;/*添加绝对定位*/ left: 200px;/*相对浏览器左边偏移200px*/ }在CSS中,position:relative;当position的值为relative时,这个盒子就是开启了相对定位模式。 引用来自W3C的权威解读:https://www.w3school.com.cn/css/css_positioning_relative.asp(内容如下图) 如果祖先元素开启了定位,则相对于祖先元素进行定位。我们现在把最近的元素box3定位设定为box4的祖先元素,使box4相对于box3进行偏移。 #box3{ width: 100px; height: 50px; background-color: #70CDE5;/*浅蓝*/ position: relative;/*添加相对定位*/ } #box4{ width: 50px; height: 50px; background-color: #009CC6;/*天蓝*/ position: absolute;/*添加绝对定位*/ left: 100px;/*相对浏览器左边偏移100px*/ top:-50px;/*相对于box3的位置向上的反方向偏移50px*/ }由效果图可以看出,当box4相对于box3决定定位时,会脱离上一步相对于浏览器窗口的偏移转为相对于box3的位置进行偏移。
|
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |