我有两个 div，我的第一个 div 包含带有图像的链接，我的第二个 div 带有 position:absolute 我的绝对区域不可点击我怎样才能让它可点击？
我可以将我的 position:absolute 设置为空吗？
给你这是我的代码，我正在使用 bootstrap
.item img{
width:100%;
height:700px !important;
max-width:100%;
display:block;
}
.booking-form {
position: absolute;
z-index: 10;
margin-top: 45px;
right: 0;
left: 0;
}
.tab-system .tab-content{
padding:12px;
background:#FFF;
}
.carousel-control.left, .carousel-control.right {
background-image: none;
-webkit-transition: all ease-in-out 0.6s;
-moz-transition: all ease-in-out 0.6s;
transition: all ease-in-out 0.6s;
}
.carousel-control{
width: auto;
position: absolute;
bottom: auto;
top: 50%;
margin-top: -10px;
display: inline-block;
}
.carousel-control.right {
right: 10%;
}
.carousel-control.left {
left: 10%;
} <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="booking-form">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="tab-system">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam commodi accusantium, voluptas quisquam obcaecati labore odit tenetur amet ex libero iste quam, nostrum temporibus architecto mollitia ipsum dignissimos non similique.</p>
</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- this is the booking form-->
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="#"><img src="https://images.pexels.com/photos/40797/wild-flowers-flowers-plant-macro-40797.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></a>
</div>
<div class="item">
<a href="#"><img src="https://images.pexels.com/photos/3247/nature-forest-industry-rails.jpg?w=1260&h=750&auto=compress&cs=tinysrgb"></a>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>最佳答案
我明白你的意思，首先你必须为你的父元素添加 pointer-events: none; 属性，然后你必须添加 pointer-events: visible;子元素的属性。
现在可以了
.item img{
width:100%;
height:700px !important;
max-width:100%;
display:block;
}
.booking-form {
position: absolute;
z-index: 10;
margin-top: 45px;
right: 0;
left: 0;
pointer-events: none;
}
.tab-system{
pointer-events: visible;
}
.tab-system .tab-content{
padding:12px;
background:#FFF;
}
.carousel-control.left, .carousel-control.right {
background-image: none;
-webkit-transition: all ease-in-out 0.6s;
-moz-transition: all ease-in-out 0.6s;
transition: all ease-in-out 0.6s;
}
.carousel-control{
width: auto;
position: absolute;
bottom: auto;
top: 50%;
margin-top: -10px;
display: inline-block;
}
.carousel-control.right {
right: 10%;
}
.carousel-control.left {
left: 10%;
}<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="booking-form">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="tab-system">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam commodi accusantium, voluptas quisquam obcaecati labore odit tenetur amet ex libero iste quam, nostrum temporibus architecto mollitia ipsum dignissimos non similique.</p>
</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- this is the booking form-->
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="#"><img src="https://images.pexels.com/photos/40797/wild-flowers-flowers-plant-macro-40797.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></a>
</div>
<div class="item">
<a href="#"><img src="https://images.pexels.com/photos/3247/nature-forest-industry-rails.jpg?w=1260&h=750&auto=compress&cs=tinysrgb"></a>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>关于jquery - 具有绝对位置的可点击区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43799622/