div在同一个体内与另一个重叠

Question

我有一个网站：my site

在导航栏中，当您点击“teamchart”时，它将转到该部分。

现在的问题是，它与接触部分重叠。如何对齐图表，然后是接触部分。

为什么会这样？

请帮助或建议我。上帝保佑。

网站涉及的代码：

'use strict';

var dataset = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];

// let colors = ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd'];
let colors = ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#e0e0e0', '#bababa', '#878787', '#4d4d4d', '#1a1a1a', 'white', 'white'];
var months = ['January - 2016', 'February - 2016', 'March - 2016', 'April - 2016', 'May - 2016', 'June - 2016', 'July - 2016', 'August - 2016', 'September - 2016', 'October - 2016', 'November - 2016', 'December - 2016'];
var dataWeeks = ["Week 1: 32<br>Week 2: 54<br>Week 3: 19<br>Week 4: 12", "Week 5: 22<br>Week 6: 14<br>Week 7: 12<br>Week 8: 03<br>Week 9:44", "Week 10: 14<br>Week 11: 11<br>Week 12: 23<br>Week 13:20 <br>Quarter 1 :25", "Week 14: 53<br>Week 15: 16<br>Week 16: 11 <br>Week 17:33", "Week 18: 52<br>Week 19: 22<br>Week 20: 12 <br>Week 21 :09 <br>Week 22:34", "Week 23: 59<br>Week 24: 87 <br>Week 25:36<br>Week 26:78<br>Quarter 2 :56<br>Half Yearly 1 :98", "Week 27: 69<br>Week 28: 33<br>Week 29: 11<br>Week 30: 65", "Week 31: 69<br>Week 32: 33<br>Week 33: 99<br>Week 34: 66<br>Week 35: 19", "Week 36: 84<br>Week 37: 16<br>Week 38: 66<br>Week 39: 11<br>Quarter 3 : 77", "Week 40: 86<br>Week 41: 21<br>Week 42: 52<br>Week 43: 12<br>Week 44: 37", "Week 45: 90<br>Week 46: 69<br>Week 47: 19<br>Week 48: 17", "Week 49:33 <br>Week 50:09 <br>Week 51:44 <br>Week 52 : 89<br>Quarter 4 :66<br>Half Yearly 2:99"];

var width = document.querySelector('.chart-wrapper').offsetWidth,
  height = document.querySelector('.chart-wrapper').offsetHeight,
  minOfWH = Math.min(width, height) / 2,
  initialAnimDelay = 300,
  arcAnimDelay = 150,
  arcAnimDur = 3000,
  secDur = 1000,
  secIndividualdelay = 150;

var radius = undefined;

// calculate minimum of width and height to set chart radius
if (minOfWH > 200) {
  radius = 200;
} else {
  radius = minOfWH;
}

// append svg
var svg = d3.select('.chart-wrapper').append('svg').attr({
  'width': width,
  'height': height,
  'class': 'pieChart'
}).append('g');

svg.attr({
  'transform': 'translate(' + width / 2 + ', ' + height / 2 + ')'
});

// for drawing slices
var arc = d3.svg.arc().outerRadius(radius * 0.6).innerRadius(radius * 0.45);

// for labels and polylines
var outerArc = d3.svg.arc().innerRadius(radius * 0.85).outerRadius(radius * 0.85);

// d3 color generator
// let c10 = d3.scale.category10();

var tooltip = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0);

var pie = d3.layout.pie().value(function(d) {
  return d;
});

var draw = function draw() {

  svg.append("g").attr("class", "lines");
  svg.append("g").attr("class", "slices");
  svg.append("g").attr("class", "labels");

  // define slice
  var slice = svg.select('.slices').datum(dataset).selectAll('path').data(pie);
  slice.enter().append('path').attr({
    'fill': function fill(d, i) {
      return colors[i];
    },
    'd': arc,
    'stroke-width': '25px'
  }).attr('transform', function(d, i) {
    return 'rotate(-180, 0, 0)';
  }).style('opacity', 0).transition().delay(function(d, i) {
    return i * arcAnimDelay + initialAnimDelay;
  }).duration(arcAnimDur).ease('elastic').style('opacity', 1).attr('transform', 'rotate(0,0,0)');

  slice.transition().delay(function(d, i) {
    return arcAnimDur + i * secIndividualdelay;
  }).duration(secDur).attr('stroke-width', '5px');

  var midAngle = function midAngle(d) {
    return d.startAngle + (d.endAngle - d.startAngle) / 2;
  };

  var text = svg.select(".labels").selectAll("text").data(pie(dataset));

  text.enter().append('text').attr('dy', '0.35em').style("opacity", 0).attr("cursor", "default").style('fill', function(d, i) {
    return colors[i];
  }).text(function(d, i) {
    return months[i];
  }).attr('transform', function(d) {
    // calculate outerArc centroid for 'this' slice
    var pos = outerArc.centroid(d);
    // define left and right alignment of text labels
    pos[0] = radius * (midAngle(d) < Math.PI ? 1 : -1);
    return 'translate(' + pos + ')';
  }).style('text-anchor', function(d) {
    return midAngle(d) < Math.PI ? "start" : "end";
  }).transition().delay(function(d, i) {
    return arcAnimDur + i * secIndividualdelay;
  }).duration(secDur).style('opacity', 1);

  text.on("mousemove", function(d, i) {
    tooltip.html(dataWeeks[i])
      .style('top', d3.event.pageY - 6 + 'px')
      .style('left', d3.event.pageX + 14 + 'px')
      .style("opacity", 1);
  }).on("mouseout", function(d) {
    tooltip.style("opacity", 0);
  });


  var polyline = svg.select(".lines").selectAll("polyline").data(pie(dataset));

  polyline.enter().append("polyline").style("opacity", 0.5).attr('points', function(d) {
    var pos = outerArc.centroid(d);
    pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);
    return [arc.centroid(d), arc.centroid(d), arc.centroid(d)];
  }).transition().duration(secDur).delay(function(d, i) {
    return arcAnimDur + i * secIndividualdelay;
  }).attr('points', function(d) {
    var pos = outerArc.centroid(d);
    pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);
    return [arc.centroid(d), outerArc.centroid(d), pos];
  });
};

draw();

var button = document.querySelector('button');

var replay = function replay() {

  d3.selectAll('.slices').transition().ease('back').duration(500).delay(0).style('opacity', 0).attr('transform', 'translate(0, 250)').remove();
  d3.selectAll('.lines').transition().ease('back').duration(500).delay(100).style('opacity', 0).attr('transform', 'translate(0, 250)').remove();
  d3.selectAll('.labels').transition().ease('back').duration(500).delay(200).style('opacity', 0).attr('transform', 'translate(0, 250)').remove();

  setTimeout(draw, 800);
};

.fl-lt {
  float: left;
}
.fl-rt {
  float: right;
}
/* Clear Floated Elements
---------------------------------*/

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:after {
  clear: both;
}
.figure {
  margin: 0px;
}
img {
  max-width: 100%;
}
a,
a:hover,
a:active {
  outline: 0px !important
}
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Primary Styles
---------------------------------*/

body {
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  color: #888888;
  margin: 0;
}
h2 {
  font-size: 34px;
  color: #222222;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 15px 0;
  text-align: center;
  text-transform: uppercase;
}
h3 {
  font-family: 'Montserrat', sans-serif;
  color: #222222;
  font-size: 16px;
  margin: 0 0 5px 0;
  text-transform: uppercase;
  font-weight: 400;
}
h6 {
  font-size: 16px;
  color: #888888;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  text-align: center;
  margin: 0 0 60px 0;
}
p {
  line-height: 24px;
  margin: 0;
}
/* Navigation
---------------------------------*/

.main-nav-outer {
  padding: 0px;
  border-bottom: 1px solid #dddddd;
  box-shadow: 0 4px 5px -3px #ececec;
  position: relative;
  background: #fff;
}
.main-nav {
  text-align: center;
  margin: 10px 0 0px;
  padding: 0;
  list-style: none;
}
.main-nav li {
  display: inline;
  margin: 0 1px;
}
.main-nav li a {
  display: inline-block;
  color: #222222;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  line-height: 20px;
  margin: 17px 32px;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.main-nav li a:hover {
  text-decoration: none;
  color: #7cc576;
}
.small-logo {
  padding: 0 32px;
}
.main-section {
  padding: 90px 0 110px;
}
/* Clients
---------------------------------*/

.client-part {
  background: url(../img/section-bg1.jpg) center center no-repeat;
  background-size: cover;
  padding: 55px 0;
  text-align: center;
}
.client-part-haead {
  color: #fdfdfd;
  font-size: 28px;
  line-height: 41px;
  margin: 30px 0 10px;
  font-family: ''Open Sans',sans-serif';
  font-style: italic;
}
.client {
  padding: 0;
  margin: 20px 0 0;
  list-style: none;
  text-align: center;
}
.client li {
  display: inline;
  margin: 0 15px;
}
.client li a {
  display: inline-block;
}
.client li a img {
  margin-bottom: 15px;
  border-radius: 50%;
}
.client li a:hover {
  text-decoration: none;
}
.client li a h3 {
  color: #ffffff;
}
.client li a span {
  color: #f1f1f1;
}
.quote-right {
  font-style: normal;
  width: 68px;
  height: 68px;
  margin: 0 auto;
  border: 2px solid #7cc576;
  border-radius: 50%;
  display: block;
  line-height: 68px;
  text-align: center;
  font-size: 27px;
  color: #7cc576;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.quote-right:hover {
  color: #fff;
  border: 2px solid #fff;
}
.c-logo-part {
  background: #7cc576;
  padding: 25px 0;
  filter: alpha(opacity=60);
}
.c-logo-part ul {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}
.c-logo-part ul li {
  display: inline;
  margin: 0 25px;
}
.c-logo-part ul a {
  display: inline-block;
  margin: 0 20px;
}
.main-section.team {
  padding: 85px 0;
}
.main-section.team h6 {
  margin-bottom: 40px;
}
/* Talk Business
---------------------------------*/

.business-talking {
  background: url(../img/section-bg2.jpg) top center no-repeat;
  background-size: cover;
  padding: 60px 0 10px;
  text-align: center;
}
.business-talking h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  padding: 0;
  margin: 20px 0 70px;
  text-transform: uppercase;
  font-size: 42px;
  color: #fff;
}
/* Contact
---------------------------------*/

.main-section.contact {
  padding: 90px 0 100px;
}
.main-section.contact {
  background: url(../img/bg-map.png) left 190px no-repeat;
}
.contact-info-box {
  font-size: 15px;
  margin: 0 0 14px 68px;
  padding-left: 0;
}
.contact-info-box h3 {
  font-size: 15px;
  font-weight: 400;
  float: left;
  width: 102px;
  margin-right: 12px;
  line-height: 28px;
}
.contact-info-box h3 i {
  font-style: normal;
  font-size: 18px;
  color: #222222;
  font-family: 'FontAwesome';
  font-weight: normal;
  margin-right: 7px;
}
.contact-info-box span {
  line-height: 28px;
  display: block;
  overflow: hidden;
}
.social-link {
  padding: 35px 0;
  margin: 0 0 0 68px;
  display: block;
  overflow: hidden;
  list-style: none;
}
.social-link li {
  float: left;
  margin-right: 8px;
}
.social-link li a {
  display: block;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 25px;
  color: #fff;
  background: #222222;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}
.social-link li a:hover,
.social-link li a:focus {
  text-decoration: none;
}
.twitter a:hover {
  background: #55acee;
}
.facebook a:hover {
  background: #3b5998;
}
.pinterest a:hover {
  background: #cb2026;
}
.gplus a:hover {
  background: #dd4b39;
}
.dribbble a:hover {
  background: #ea4c89;
}
.form {
  margin: 0 66px 0 30px;
}
.input-text {
  padding: 15px 16px;
  border: 1px solid #ccc;
  width: 100%;
  height: 50px;
  display: block;
  border-radius: 4px;
  font-size: 15px;
  color: #aaa;
  font-family: 'Open Sans', sans-serif;
  margin: 0 0 15px 0;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.input-text:focus {
  border: 1px solid #7cc576;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(124, 197, 118, 0.3);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(124, 197, 118, 0.3);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(124, 197, 118, 0.3);
}
.input-text.text-area {
  height: 165px;
  resize: none;
  overflow: auto;
}
.input-btn {
  width: 175px;
  height: 50px;
  background: #7cc576;
  border-radius: 4px;
  color: #ffffff;
  font-size: 14px;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  border: 0px;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.input-btn:hover {
  background: #111;
  color: #fff;
}
.validation {
  color: red;
  display: none;
  margin: 0 0 20px;
  font-weight: 400;
  font-size: 13px;
}
#sendmessage {
  color: #7cc576;
  border: 1px solid #7cc576;
  display: none;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}
#errormessage {
  color: red;
  display: none;
  border: 1px solid red;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}
#sendmessage.show,
#errormessage.show,
.show {
  display: block;
}
/* Animation Timers
---------------------------------*/

.delay-02s {
  animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
}
.delay-03s {
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
}
.delay-04s {
  animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
}
.delay-05s {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.delay-06s {
  animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
}
.delay-07s {
  animation-delay: 0.7s;
  -webkit-animation-delay: 0.7s;
}
.delay-08s {
  animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
}
.delay-09s {
  animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
}
.delay-1s {
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
}
.delay-12s {
  animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
}
.chart-wrapper {
  width: 100%;
  height: 100%;
  background-color: #0d0d0d;
  position: absolute;
}
path {
  stroke: #0d0d0d;
  /* stroke-width: 5px; */
  cursor: pointer;
  -webkit-transition: fill 250ms;
  transition: fill 250ms;
}
path:hover {
  /* stroke-width: 10px; */
  fill: #fff;
}
text {
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .5px;
}
polyline {
  fill: none;
  stroke: #fff;
  stroke-width: 2px;
  stroke-dasharray: 5px;
}
.main-section.button {
  position: absolute;
  top: 20px;
  left: 820px;
  text-transform: uppercase;
  padding: 5px 10px;
  outline: none;
  font-size: .6em;
  background-color: black;
  color: #fff;
  border: 1px solid #fff;
  letter-spacing: 1px;
  -webkit-transition: all 250ms;
  transition: all 250ms;
}
button:hover {
  background-color: #fff;
  color: #0d0d0d;
  box-shadow: 0 0 2px #fff;
}
button:active {
  opacity: 0.5;
}
div.tooltip {
  position: absolute;
  padding: 4px;
  background: white;
  border: 1px solid black;
  border-radius: 2px;
  font-size: 14px;
}

<!doctype html>
<html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<title>Homepage</title>
<link rel="icon" href="favicon.png" type="image/png">
<link rel="shortcut icon" href="favicon.ico" type="img/x-icon">

<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,800italic,700italic,600italic,400italic,300italic,800,700,600' rel='stylesheet' type='text/css'>

<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="css/animate.css" rel="stylesheet" type="text/css">

<!--[if IE]><style type="text/css">.pie {behavior:url(PIE.htc);}</style><![endif]-->

<script type="text/javascript" src="js/jquery.1.8.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/wow.js"></script>
<script type="text/javascript" src="js/classie.js"></script>

<script src="contactform/contactform.js"></script>

<script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script>
</head>

<body>

  <nav class="main-nav-outer" id="test">
    <!--main-nav-start-->
    <div class="container">
      <ul class="main-nav">
        <li><a href="#header">Home</a>
        </li>
        <li><a href="#service">Services</a>
        </li>
        <li><a href="#Portfolio">Portfolio</a>
        </li>
        <li class="small-logo">
          <a href="#header">
            <img src="img/small-logo.png" alt="">
          </a>
        </li>
        <li><a href="#client">Clients</a>
        </li>
        <li><a href="#team">TeamChart</a>
        </li>
        <li><a href="#contact">Contact</a>
        </li>
      </ul>
      <a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
    </div>
  </nav>
  <!--main-nav-end-->

  <section class="main-section client-part" id="client">
    <!--main-section client-part-start-->
    <div class="container">
      <b class="quote-right wow fadeInDown delay-03"><i class="fa-quote-right"></i></b>
      <div class="row">
        <div class="col-lg-12">
          <p class="client-part-haead wow fadeInDown delay-05">It was a pleasure to work with the guys at Knight Studio. They made sure we were well fed and drunk all the time!</p>
        </div>
      </div>
      <ul class="client wow fadeIn delay-05s">
        <li>
          <a href="#">
            <img src="img/client-pic1.jpg" alt="">
            <h3>James Bond</h3>
            <span>License To Drink Inc.</span>
          </a>
        </li>
      </ul>
    </div>
  </section>
  <!--main-section client-part-end-->
  <div class="c-logo-part">
    <!--c-logo-part-start-->
    <div class="container">
      <ul>
        <li>
          <a href="#">
            <img src="img/c-liogo1.png" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/c-liogo2.png" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/c-liogo3.png" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/c-liogo4.png" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/c-liogo5.png" alt="">
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!--c-logo-part-end-->


  <!-- chart section -->

  <section class="main-section team" id="team">
    <!--main-section team-start-->
    <div class="container">
      <h2>TeamChart</h2>
      <h6>Chart talks about the points required</h6>
      <div class="chart-wrapper"></div>
      <button onclick='replay()'>Replay</button>
      <div class="textt" data-tip="this is the data ."></div>

    </div>
  </section>
  <!--main-section team-end-->





  <section class="business-talking">
    <!--business-talking-start-->
    <div class="container">
      <h2>Let’s Talk Business.</h2>
    </div>
  </section>
  <!--business-talking-end-->
  <div class="container">
    <section class="main-section contact" id="contact">

      <div class="row">
        <div class="col-lg-6 col-sm-7 wow fadeInLeft">
          <div class="contact-info-box address clearfix">
            <h3><i class=" icon-map-marker"></i>Address:</h3>
            <span>308 Negra Arroyo Lane<br>Albuquerque, New Mexico, 87111.</span>
          </div>
          <div class="contact-info-box phone clearfix">
            <h3><i class="fa-phone"></i>Phone:</h3>
            <span>1-800-BOO-YAHH</span>
          </div>
          <div class="contact-info-box email clearfix">
            <h3><i class="fa-pencil"></i>email:</h3>
            <span>hello@knightstudios.com</span>
          </div>
          <div class="contact-info-box hours clearfix">
            <h3><i class="fa-clock-o"></i>Hours:</h3>
            <span><strong>Monday - Thursday:</strong> 10am - 6pm<br><strong>Friday:</strong> People work on Fridays now?<br><strong>Saturday - Sunday:</strong> Best not to ask.</span>
          </div>
          <ul class="social-link">
            <li class="twitter"><a href="#"><i class="fa-twitter"></i></a>
            </li>
            <li class="facebook"><a href="#"><i class="fa-facebook"></i></a>
            </li>
            <li class="pinterest"><a href="#"><i class="fa-pinterest"></i></a>
            </li>
            <li class="gplus"><a href="#"><i class="fa-google-plus"></i></a>
            </li>
            <li class="dribbble"><a href="#"><i class="fa-dribbble"></i></a>
            </li>
          </ul>
        </div>
        <div class="col-lg-6 col-sm-5 wow fadeInUp delay-05s">
          <div class="form">

            <div id="sendmessage">Your message has been sent. Thank you!</div>
            <div id="errormessage"></div>
            <form action="" method="post" role="form" class="contactForm">
              <div class="form-group">
                <input type="text" name="name" class="form-control input-text" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
                <div class="validation"></div>
              </div>
              <div class="form-group">
                <input type="email" class="form-control input-text" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
                <div class="validation"></div>
              </div>
              <div class="form-group">
                <input type="text" class="form-control input-text" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
                <div class="validation"></div>
              </div>
              <div class="form-group">
                <textarea class="form-control input-text text-area" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
                <div class="validation"></div>
              </div>

              <div class="text-center">
                <button type="submit" class="input-btn">Send Message</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  </div>

  <script type="text/javascript">
    $(document).ready(function(e) {
      $('#test').scrollToFixed();
      $('.res-nav_click').click(function() {
        $('.main-nav').slideToggle();
        return false

      });

    });
  </script>

  <script>
    wow = new WOW({
      animateClass: 'animated',
      offset: 100
    });
    wow.init();
  </script>


  <script type="text/javascript">
    $(window).load(function() {

      $('.main-nav li a').bind('click', function(event) {
        var $anchor = $(this);

        $('html, body').stop().animate({
          scrollTop: $($anchor.attr('href')).offset().top - 102
        }, 1500, 'easeInOutExpo');
        /*
			if you don't want to use the easing effects:
			$('html, body').stop().animate({
				scrollTop: $($anchor.attr('href')).offset().top
			}, 1000);
			*/
        event.preventDefault();
      });
    })
  </script>

  <script type="text/javascript">
    $(window).load(function() {


      var $container = $('.portfolioContainer'),
        $body = $('body'),
        colW = 375,
        columns = null;


      $container.isotope({
        // disable window resizing
        resizable: true,
        masonry: {
          columnWidth: colW
        }
      });

      $(window).smartresize(function() {
        // check if columns has changed
        var currentColumns = Math.floor(($body.width() - 30) / colW);
        if (currentColumns !== columns) {
          // set new column count
          columns = currentColumns;
          // apply width to container manually, then trigger relayout
          $container.width(columns * colW)
            .isotope('reLayout');
        }

      }).smartresize(); // trigger resize to set container width
      $('.portfolioFilter a').click(function() {
        $('.portfolioFilter .current').removeClass('current');
        $(this).addClass('current');

        var selector = $(this).attr('data-filter');
        $container.isotope({

          filter: selector,
        });
        return false;
      });

    });
  </script>
  <script src="js/indexpiechart.js"></script>
</body>

</html>

Answer 1

这是一个简单的修复。在.chart-wrapper下的CSS代码中，您有position：absolute。改变位置：绝对到位置：相对，重叠将消失。在HTML / CSS中，元素应相对于彼此显示以防止重叠。将元素的位置设置为绝对值时，它将保持固定在该位置，从而导致重叠。正确的CSS：

.chart-wrapper {
    width: 100%;
    height: 100%;
    background-color: #0d0d0d;
    position: relative;
}