为什么我的孩子div不留在父div内？

时间：2019-04-28 06:58:46

标签： html css

我有一个带子div的父div，但是当子div在父div内时，它会显示在父div下方。

我尝试了z-index，但无济于事。

我只希望圆点位于父对象的内部和顶部。但是相反，它们在下面。

body,
html {
  margin: auto 0;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

nav {
  background-color: #222;
  height: 42px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

li {
  list-style: none;
  display: inline-block;
  float: left;
  margin-left: 20px;
  margin-top: -6px;
}

li a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 20px;
}

li a img {
  height: 45px;
  margin-top: -12px;
  z-index: -1;
  margin-left: -45px;
}

.nav-first {
  margin-left: 5px;
}

.mobile-button,
.mobile-navbar-text,
.closebtn,
.media-links {
  display: none;
  cursor: pointer;
}

.slideshow {
  background-color: red;
  width: 100%;
  height: 75%;
  position: absolute;
  top: 42px;
}

.slideshow img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 0;
}

.dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-flex;
  cursor: pointer;
  background-color: lightgrey;
  z-index: 1;
  transition: background-color 0.3s ease;
}

.dot:hover {
  background-color: grey;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>U.S.A Plates</title>
  <link rel="stylesheet" href="master.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <nav>
    <ul>
      <li>
        <a href="#"><img src="https://seeklogo.net/wp-content/uploads/2012/10/american-flag-logo-vector.png"></a>
      </li>
      <li><a href="#" class="nav-first navbar-text">Sample Text</a></li>
      <li><a href="#" class="navbar-text">Sample Text</a></li>
      <li><a href="#" class="navbar-text">Sample Text</a></li>
      <li><a href="#" class="navbar-text">Sample Text</a></li>
      <li><a href="#" class="navbar-text">Sample Text</a></li>
      <span class="mobile-button">&#9776;</span>
    </ul>
  </nav>
  <div class="mobile-sidenavbar">
    <a href="javascript:void(0)" class="closebtn">&times;</a>
    <a href="#" class="mobile-navbar-text">Sample Text</a>
    <a href="#" class="mobile-navbar-text">Sample Text</a>
    <a href="#" class="mobile-navbar-text">Sample Text</a>
    <a href="#" class="mobile-navbar-text">Sample Text</a>
    <a href="#" class="mobile-navbar-text">Sample Text</a>
    <div class="media-links">
      <a href="#" class="fa facebook">&#xf082;</a>
      <a href="#" class="fa twitter">&#xf081;</a>
      <a href="#" class="fa instagram">&#xf16d;</a>
    </div>
  </div>
  <div class="slideshow">
    <img name="slide" src="https://images.unsplash.com/photo-1554457604-71bd155ff013?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3648&q=80" alt="" width="100%" height="100%">
    <div style="text-align:center;">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="masterjs.js" charset="utf-8"></script>
</body>

</html>

1 个答案:

答案 0 :(得分：0)

我看到的一个问题是，尽管您使用的是静态CSS，但您正在为背景图像设置img属性。代替background-size: cover，使用object-fit: cover。

对于点，您可以将其绝对定位并将其固定在.slideshow容器的底部。使用变换，可以将它们直接定位在容器的中心。我在包含您的class个孩子的span周围添加了一个.dot，并在其中添加了这些描述的样式。

.dots {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

enter image description here 

body,
html {
  margin: auto 0;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

nav {
  background-color: #222;
  height: 42px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

li {
  list-style: none;
  display: inline-block;
  float: left;
  margin-left: 20px;
  margin-top: -6px;
}

li a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 20px;
}

li a img {
  height: 45px;
  margin-top: -12px;
  z-index: -1;
  margin-left: -45px;
}

.nav-first {
  margin-left: 5px;
}

.mobile-button,
.mobile-navbar-text,
.closebtn,
.media-links {
  display: none;
  cursor: pointer;
}

.slideshow {
  background-color: red;
  width: 100%;
  height: 75%;
  position: absolute;
  top: 42px;
}

.slideshow img {
  object-fit: cover;
  z-index: 0;
}

.dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-flex;
  cursor: pointer;
  background-color: lightgrey;
  z-index: 1;
  transition: background-color 0.3s ease;
}

.dot:hover {
  background-color: grey;
}

.dots {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>U.S.A Plates</title>
  <link rel="stylesheet" href="master.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <nav>
    <ul>
      <li>
        <a href="#"><img src="https://seeklogo.net/wp-content/uploads/2012/10/american-flag-logo-vector.png"></a>
      </li>
      <li><a href="#" class="nav-first navbar-text">Sample Text</a></li>
      <li><a href="#" class="navbar-text">Sample Text</a></li>
      <li><a href="#" class="navbar-text">Sample Text</a></li>
      <li><a href="#" class="navbar-text">Sample Text</a></li>
      <li><a href="#" class="navbar-text">Sample Text</a></li>
      <span class="mobile-button">&#9776;</span>
    </ul>
  </nav>
  <div class="mobile-sidenavbar">
    <a href="javascript:void(0)" class="closebtn">&times;</a>
    <a href="#" class="mobile-navbar-text">Sample Text</a>
    <a href="#" class="mobile-navbar-text">Sample Text</a>
    <a href="#" class="mobile-navbar-text">Sample Text</a>
    <a href="#" class="mobile-navbar-text">Sample Text</a>
    <a href="#" class="mobile-navbar-text">Sample Text</a>
    <div class="media-links">
      <a href="#" class="fa facebook">&#xf082;</a>
      <a href="#" class="fa twitter">&#xf081;</a>
      <a href="#" class="fa instagram">&#xf16d;</a>
    </div>
  </div>
  <div class="slideshow">
    <img name="slide" src="https://images.unsplash.com/photo-1554457604-71bd155ff013?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3648&q=80" alt="" width="100%" height="100%">
    <div class="dots">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="masterjs.js" charset="utf-8"></script>
</body>

</html>

相关问题
最新问题