理解CSS的position:relative
最近工做中作了几件事情都与页面元素定位相关，因此这里将工做中遇到的问题以及解决方法记录在博客里，以便往后查阅。html
叠压ide
有一个任务是作一个列表组件，列表中的每一行都要向上叠压上一行的底边，注意，是叠压，不是接壤。spa
问题分析：3d
利用相对定位（position:relative）来制造相对于行（row）的偏移量，使行内元素向上偏移，并叠压上一行的行内元素的底边。htm
既然是相对定位，那就不能让每一行的定位基准点基于上一行的底边。由于，基准点不会由于上一行元素被CSS搞过以后而同时发生偏移。blog
举例说明：2个div上下排列，第一个div（class="div1"）height为100px，而且向上偏移-10px。第二个div（class="div2"）height也是100px，但愿叠压到div1的底边10px，因此也设置了top: -10px。若是div1的基准点Y轴坐标=0px，那么，在div1没有发生偏移的状况下，div2的基准点Y轴坐标= div1.top + div1.height，也就是0px + 100px = 100px。如今，div1.top = -10px，即向上偏移10px，按理说，div2的基准点= -10px + 100px = 90px。惋惜，现实并不是如此。div2的基准点并无任何改变。因此，div2.top = -10px 依旧没法叠压到div1的底边。只有当div2.top=-20px才可能叠压到div1底边10px处。有人说此处应该让div1的高度增长10px，这样，div2就能叠压到div1了。我作了尝试，发现当div1的高度增长10px后，div2的原始基准点Y轴坐标也跟着+10px。如此，从新套用公式：div2的定位基准点Y轴坐标 = div1的定位基准点Y轴坐标 + div1高度，从新获得div2的定位基准点Y轴坐标为110px。110px-10px的向上偏移量=100px，而div1虽然高度增长到了110px，但是它向上偏移了-10px，div2仍是叠压不到div1的底边。博客
解决思路：it
就像问题分析中开头说的那样，解决方法很简单，就是不要让后续元素的定位基准点基于前一个会改变位置的元素。以下图：io
上图是原先的元素排列结构。这种结构中，每一个要向上偏移的元素定位基准点就是上一个也须要变更位置的元素的左下角。这样是不能实现咱们的需求的。只要在元素结构上稍加改变，就能够了。下图是结构改造后的元素结构：ast
在原来每一个元素内部再添加一个box元素（蓝色元素）。将偏移设置在这个box元素上。由于每一个浅蓝色的box元素都是基于其上层box元素（黑色边框的div）的，而非前面一个须要变更位置的box元素，因此每一个浅蓝色的box元素进行偏移时、增长高度时，都不会改变下一个浅蓝色box的定位基准点。并且，每一个浅蓝色box元素的高度增长，也不会致使其上层box元素（黑色边框的div）高度改变，由于浅蓝色box元素改变了其top属性后，它就被认为是个浮动元素。一个浮动元素不会撑大包含它的上层box元素。因此第二个黑框div，以及第三个黑框div的定位基准点都不会发生改变。如此一来，咱们即可以实现浅蓝色box元素相互叠压的效果了。
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 20px;
}
.nav-menu-bar {
height: 500px;
width: 350px;
overflow-x: auto;
}
.menu-item-slot {
height: 50px;
width: 100%;
}
.nav-menu-bar .menu-item {
background-color: rgba(128,176,224, 1.0); /*rgba()#6699cc;*/
border-radius: 8px 8px 0px 0px;
box-shadow: 0px -5px 5px -2px #375e8c;
position: relative;
top: -8px;
height: 58px; /* ------ Be careful ------ */
width: 100%;
overflow: hidden;
}
.menu-item .content {
margin-top: 8px;
margin-left: 8px;
width: 94%;
height: 72%;
vertical-align: top;
overflow-x: hidden;
color: #fafafa;
}
.nav-menu-bar .menu-item-slot:hover {
transition: height 0.3s;
height: 200px;
}
.nav-menu-bar .menu-item-slot:first-child:hover {
transition: height 0.3s;
height: 208px;
}
.nav-menu-bar .menu-item-slot:first-child .menu-item:hover {
transition: height 0.3s;
height: 208px;
}
.nav-menu-bar .menu-item:hover {
transition: height 0.3s;
height: 208px;
}
.nav-menu-bar .menu-item-slot:first-child {
height: 58px;
}
.nav-menu-bar .menu-item-slot:first-child .menu-item {
box-shadow: none;
top: 0px;
}
.nav-menu-bar .menu-item-slot:last-child .menu-item {
border-radius: 8px 8px 8px 8px;
}
</style>
</head>
<body>
<div class="nav-menu-bar">
<div class="menu-item-slot">
<div class="menu-item">
<div class="content">Created in 1998, its name is derived from the World Wide Web,</div>
</div>
</div>
<div class="menu-item-slot">
<div class="menu-item">
<div class="content">Created in 1998, its name is derived from the World Wide Web,</div>
</div>
</div>
<div class="menu-item-slot">
<div class="menu-item">
<div class="content">Created in 1998, its name is derived from the World Wide Web,</div>
</div>
</div>
<div class="menu-item-slot">
<div class="menu-item"></div>
</div>
</div>
</body>
</html>
- 1. 【CSS】理解CSS
- 2. CSS BFC的理解
- 3. css hack的理解
- 4. OO CSS的我的理解
- 5. 关于DIV+CSS和XHTML+CSS的理解
- 6. 深刻理解CSS系列（一）：理解CSS的盒子模型
- 7. 理解 CSS 中的 BFC
- 8. css盒模型的理解
- 9. CSS变形的理解
- 10. CSS 浮动的理解
- 更多相关文章...
- • jQuery Mobile CSS 类 - jQuery Mobile 教程
- • CSS 指南 - 网站建设指南
- • Docker 清理命令
- • 常用的分布式事务解决方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 【CSS】理解CSS
- 2. CSS BFC的理解
- 3. css hack的理解
- 4. OO CSS的我的理解
- 5. 关于DIV+CSS和XHTML+CSS的理解
- 6. 深刻理解CSS系列（一）：理解CSS的盒子模型
- 7. 理解 CSS 中的 BFC
- 8. css盒模型的理解
- 9. CSS变形的理解
- 10. CSS 浮动的理解