如何允许javascript流过其他页面元素

时间:2015-06-11 07:08:43

标签: javascript html css twitter-bootstrap d3.js

我正在尝试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>

1 个答案:

答案 0 :(得分:2)

使用CSS将以下属性应用于标题:

//##

z-index是一个样式属性,用于定义元素的堆叠顺序。索引越高,它进一步向前堆叠。例如,具有z-index 1的元素位于未定义z-index的任何元素之前,但位于z-index为5的元素之后。