作者：倒颠0 | 来源：互联网 | 2023-09-02 19:28
想到达的效果：由于其中嵌套不正确：解决方案：使得悬浮的标签进行脱离文本流，则不会影响原来的布局：注意同级内联标签中任意一个改变都会影响到其他标签的布局：例如其中一个margin-t
一：inline-block中不要嵌套其他block标签，不然会破坏布局
class=
"hl-menu left">
""
class-=
"item">菜单一
""
class-=
"item">菜单二
""
class-=
"item">菜单三
class=
"item-div">
""
class=
"item">菜单四
class="item-set hide">
"">菜单四-1
"">菜单四-2
"">菜单四-3
"">菜单四-4
想到达的效果：
由于其中嵌套不正确：
解决方案：
使得悬浮的标签进行脱离文本流，则不会影响原来的布局：
.item-div:hover .item-set{
display: block;
position: absolute; //相对自己（body）进行页面排布，脱离文本流
}
.item-div .item-set a{
display: block;
background-color: #4cae4c;
}
注意同级内联标签中任意一个改变都会影响到其他标签的布局：
例如其中一个margin-top:10px;会将其他的也挤下来。解决办法是将该标签float设置，就不在影响同级标签
二：absolute实现后台页面布局：
使用position是元素脱离文本流，然后进行页面布局：
class=
"pg-body">
class="menus">
class=
"content">
"height: 2000px;">
左侧布局：
.pg-body .menus{
width: 200px;
background-color: #4cae4c;
position: absolute;
bottom: 0px;
top: 48px;
}
右侧布局：
.pg-body .content{
position: absolute;
top: 48px;
bottom: 0px;
right: 0px;
left: 200px;
background-color: #1b6d85;
overflow-y: scroll;
overflow-x: hidden;
}
css拾遗（一）
京公网安备 11010802041100号