bootstrap - 栅格系统之间左边col部分overflow出去的内容会被右边col部分遮盖？
本文介绍了bootstrap - 栅格系统之间左边col部分overflow出去的内容会被右边col部分遮盖？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
改变z-index的值和overflow：hidden没有用，overflow的部分还是会被遮盖，不知道为什么，求解。
html:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>autoop-home</title>
<!-- css -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">
<link rel="stylesheet" href="./css/autoop-index.css">
</head>
<body>
<div class="container col-sm-10 col-sm-offset-1">
<div class="row">
<div class="index-menu col-sm-3">
<div class="index-menu-home">
<h1>AUTOOP</h1>
</div>
<ul class="index-menu-nav">
<li class="active"><a href=""><span class="first fa fa-dashboard"></span><span>主控页面</span><span class="second fa fa-angle-left"></span></a></li>
<li class="active"><a href=""><span class="first fa fa-dashboard"></span><span>装机列表</span><span class="second fa fa-angle-left"></span></a></li>
<li class="active"><a href=""><span class="first fa fa-dashboard"></span><span>资产管理</span><span class="second fa fa-angle-left"></span></a></li>
<li class="active"><a href=""><span class="first fa fa-dashboard"></span><span>部署管理</span><span class="second fa fa-angle-left"></span></a></li>
<li class="active"><a href=""><span class="first fa fa-dashboard"></span><span>监控中心</span><span class="second fa fa-angle-left"></span></a></li>
<li class="active"><a href=""><span class="first fa fa-dashboard"></span><span>日志分析</span><span class="second fa fa-angle-left"></span></a></li>
<li class="active"><a href=""><span class="first fa fa-dashboard"></span><span>运维审计</span><span class="second fa fa-angle-left"></span></a></li>
</ul>
</div>
<div class="index-main col-sm-9">
<div class="index-main-top">
</div>
<div class="index-main-contain">
</div>
</div>
</div>
</div>
<!-- javascript -->
<script src="./js/jquery-2.2.3.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>css:
html {
height: 100%;
}
body {
height: 100%;
padding: 0;
margin: 0;
font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight: 400;
text-align: center;
/*background: url(../img/background.jpg) no-repeat fixed top;
background-size: 100%;*/
}
a:hover {
text-decoration: none;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
position: relative;
padding: 0;
}
.container, .row{
height: 100%;
}
.row {
margin-top: 2rem;
}
/*left*/
.index-menu {
height: 100%;
background-color: white;
}
h1 {
margin: 0;
line-height: 7rem;
}
.index-menu-home {
color: black;
height: 7rem;
background-color: white;
}
.index-menu-nav {
padding: 0;
}
.index-menu-nav>li {
display: block;
border: 1px solid #EEE;
margin-bottom: 2rem;
width: 100%;
height: 6rem;
line-height: 6rem;
background-color: white;
}
.index-menu-nav>li:hover {
background-color: #FCFCFC;
}
.index-menu-nav>li:hover .first {
color: white;
background-color: black;
}
.index-menu-nav>li:hover .second {
transform: rotateY(180deg);
margin-right: -6rem;
}
.index-menu-nav a {
font-weight: 400;
font-size: 2rem;
color: black;
background-color: transparent;
display: block;
}
.index-menu-nav span {
float: left;
margin-left: 1.5rem;
}
.index-menu-nav .first {
line-height: 6rem;
width: 6rem;
height: 6rem;
margin: 0;
}
.index-menu-nav .second {
line-height: 6rem;
width: 6rem;
height: 6rem;
float: right;
}
.index-menu-nav>li .second {
margin-right: 0;
transform: rotateY(0deg);
transition: all 0.3s;
z-index: 20;
}
/*right*/
.index-main {
height: 100%;
background-color: #FCFCFC;
margin-left: -20px;
z-index: 0;
}
.index-main-top {
height: 7rem;
background-color: white;
}`
解决方案
z-index 只能用在 static 以外的元素
.index-menu {
position: relative;
z-index: 1;
height: 100%;
background-color: white;
}这篇关于bootstrap - 栅格系统之间左边col部分overflow出去的内容会被右边col部分遮盖？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
