我正在尝试d3.js.我只有一个非常简单的标题(bootstrap的html)和d3.js图。我希望标题在图表上可见,而目前容器覆盖它。
<!DOCTYPE html>
<html>
<head>
<title>Graph/index</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<script src="https://d3js.org/d3.min.js" charset="utf-8"></script>
<%= csrf_meta_tags %>
<div class="container-full">
<div class="row">
<div class="col-lg-12 text-center v-center">
<h1>My.app</h1>
<br>
<form class="col-lg-12">
<div class="input-group input-group-lg col-sm-offset-4 col-sm-4">
<input type="text" class="center-block form-control input-lg" title="Enter you email." placeholder="My app">
<span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button">OK</button></span>
</div>
</form>
</div>
</div> <!-- /row -->
<div class="row">
<div class="col-lg-12 text-center v-center" style="font-size:39pt;">
<a href="#"><i class="icon-google-plus"></i></a> <a href="#"><i class="icon-facebook"></i></a> <a href="#"><i class="icon-twitter"></i></a> <a href="#"><i class="icon-github"></i></a> <a href="#"><i class="icon-pinterest"></i></a>
</div>
</div>
<br><br><br><br><br>
</div> <!-- /container full -->
<style>
</style>
</head>
<body>
<%= yield %>
<%= javascript_include_tag('graph') %>
</body>
</html>
答案 0 :(得分:2)
使用CSS将以下属性应用于标题:
//##
z-index是一个样式属性,用于定义元素的堆叠顺序。索引越高,它进一步向前堆叠。例如,具有z-index 1的元素位于未定义z-index的任何元素之前,但位于z-index为5的元素之后。