响应滑块定位

Question

我正在建立一个响应式网站，但我正在努力应对幻灯片的点，如下图所示，当我切换到设备工具栏时，他们改变了他们的位置我已经尝试了相关的一切单位到绝对的，但没有任何工作请我需要帮助，我搜索谷歌等等，但我没有找到任何有用的东西。

当我切换到设备工具栏时：

当你注意到点的位置变化时我不想要这种行为。

这是我的代码：

HTML：

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>EatManger</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="query.css">

</head>

<body style="background-color:purple">


  <div class="container">

    <div class="logo-box">
      <img src="images/logo.png" class="logo" alt="logo">
    </div>
    <i class="fas fa-bars hamburger-btn"></i>
    <ul class="main-nav">
      <li class="main-nav-item"><a class="main-nav-link" href="#">services</a></li>
      <li class="main-nav-item"><a class="main-nav-link" href="#">reservation</a></li>
      <li class="main-nav-item"><a class="main-nav-link" href="#">menu</a></li>
      <li class="main-nav-item"><a class="main-nav-link" href="#">our chefs</a></li>
      <li class="main-nav-item"><a class="main-nav-link" href="#">events</a></li>
    </ul>

  </div>

  <div class="slideshow-container">
    <div class="mySlides fade-zz">
      <img src="images/food3.png" class="imgSlide">
    </div>
    <div class="mySlides fade-zz">
      <img src="images/pizza.png" class="imgSlide" >
    </div>

    <div class="mySlides fade-zz">
      <img src="images/hamburger2.png" class="imgSlide">
    </div>

    <div class="dotz">
      <span class="dot" onclick="currentSlide(1-1)"></span>
      <span class="dot" onclick="currentSlide(2-1)"></span>
      <span class="dot" onclick="currentSlide(3-1)"></span>
    </div>


  </div>





  <div class="contact-box">
    <div class="adress">
      <i class="fas fa-map-marker-alt conbox"></i>
      <h3 class="contact-title">Address</h3>
      <p class="contact-description">4579 Penn Street,Manchester<br>united kingdom</p>
    </div>
    <div class="phone">
      <i class="fas fa-phone-volume conbox"></i>
      <h3 class="contact-title">Phone</h3>
      <p class="contact-description">636-399-9776 <br> 573-225-7350</p>
    </div>
    <div class="opening-time">
      <i class="far fa-clock conbox"></i>
      <h3 class="contact-title">Opening time</h3>
      <p class="contact-description">all the days of the week <br>from 6 am to midnight</p>
    </div>
</div>

<section class="about-us">
<i class="fas fa-utensils abicon"></i>
<h1 class="title">About us</h1>
  <p class="title-description">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un
    imprimeur
    anonyme assembla </p>
</section>

















  <script src="script.js" charset="utf-8"></script>
</body>

</html>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  height: 4rem;
  background-color: red;
  transition: height .1s;
}

.container-add{
  height: 20rem;
}

.hamburger-btn {
  position: absolute;
  margin-top: 5px;
  right: 4px;
  font-size: 40px;
  color: white;
}

.logo-box {
  display: inline-block;
}

.logo {
  width: 100px;
}

.main-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 15.62rem;
  align-items: center;
visibility: hidden;
}

.main-nav-hide{
  visibility:visible;
}

.main-nav-item {
  list-style: none;
  color: white;
  font-family: Roboto;
  text-transform: uppercase;
  font-weight: 700;
  /* display: none; */
}



.main-nav-link {
  text-decoration: none;
  color: inherit;
  padding-left: 20px;
}


.slideshow-container{
  margin: auto;
  max-width: 980px;
  width: 100vw;
}

.imgSlide{
  width: 100%;
}

.imgSlide-show{
  display: block;
}

.dotz{
  text-align: center;
  position: absolute;
  top: 35%;
  left: 50vw
}

.dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background-color: #ddd
}

.active{
background-color: #ff9900;

}

.active:hover,.dot:hover{
  cursor: pointer;
}

.fade-zz{
  animation-name: fade;
  animation-duration: 1.4s;
  transition:.4s
}

@keyframes fade {
  from{
    opacity: .4;
  }
  to{
    opacity: 1
  }
}

.contact-box{
  background-color: red;
  position: relative;
  top: -1.39rem;
  height: 380px;
}

.conbox{
  color: white;
  display: block;
  text-align: center;
  font-size: 2rem;
  /* margin-top: .8rem; */
}


.adress{
color: white;
text-align: center;
font-family: roboto;
margin-bottom: 3rem;
position: relative;
top: .5rem;
}


.phone{
color: white;
text-align: center;
font-family: roboto;
margin-bottom: .8rem;
}


.opening-time{
  color: white;
  text-align: center;
  font-family: roboto;
  margin-top: 2rem;
}


.about-us{
  color: white;
}

.title{
  text-align: center;
  font-family: roboto;
}

.abicon{
  text-align: center;
  display: block;
padding-right: 7rem;
margin-top: 1rem;
font-size: 2rem;
position: relative;
top: 2%;
}

.title-description{
  display: block;
  margin: auto;
}

JavaScript的

//HAMBURGER BUTTON

var hamBtn=document.querySelector(".hamburger-btn");

hamBtn.addEventListener("click",function(){
  document.querySelector(".main-nav").classList.toggle("main-nav-hide");
document.querySelector(".container").classList.toggle("container-add");



});


//SLIDESHOW

slideIndex=0;

function currentSlide(n){
  slideIndex=n;
  showSlide(slideIndex);
}

function showSlide(n){
  var i;
  var slides=document.getElementsByClassName("mySlides");
console.log(slides);
  var dots=document.getElementsByClassName("dot");

  for (i = 0; i < slides.length; i++) {
      slides[i].style.display="none";
  }
  slideIndex++;
if (slideIndex>slides.length) {
  slideIndex=1;
}
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }

  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
setTimeout(showSlide,50)

setInterval(showSlide,6000)

对于问题标题感到抱歉我无法想出一个更好的描述我的情况的任何一个更好的标题的建议将被接受，以帮助其他正在努力解决相同问题的人找到解决方案，并提前感谢你。

Answer 1

只需添加“.dotz”以下内容

.dotz{
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
}

中心任何块有position:absolute你只需要left, right到0和margin自动和肯定父div必须有position:relative

响应滑块定位

问题描述投票：0回答：1

1个回答

最新问题

响应滑块定位

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1