Bootstrap / CSS：使我的内容位于滚动条的标题下方

时间：2019-02-06 16:07:51

标签： html css

我有一个简单的html页面，使用css可以正常工作，除了当我向下滚动页面时，输入形式在标题上方。我希望标题始终在滚动时位于内容上方。

任何人都可以帮忙吗？

.sticky {
  position: sticky;
  top: 0;
}
#i ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: blue;
}

#i li {
  float: left;
}

#i li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#i li a:hover {
  border-radius: 0px 0px 10px 10px;
  background-color: rgb(43, 137, 226);
}

.active {
  background-color: rgb(43, 137, 226);
}

#footer-id {
  background-color: blue;
}

#MyForm .contact-form {
  background: #fff;
  margin-top: 10%;
  margin-bottom: 5%;
  width: 70%;
}

#MyForm .fixed-header {
  width: 100%;
  margin: 0 auto;
  position: fixed;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 999;
}

#MyForm .contact-form .form-control {
  border-radius: 1rem;
}
#MyForm .contact-image {
  text-align: center;
}
#MyForm .contact-image img {
  border-radius: 6rem;
  width: 11%;
  margin-top: -3%;
  transform: rotate(29deg);
}
#MyForm .contact-form form {
  padding: 14%;
}
#MyForm .contact-form form .row {
  margin-bottom: -7%;
}
#MyForm .contact-form h3 {
  margin-bottom: 8%;
  /* margin-top: -10%; */
  text-align: center;
  color: #0062cc;
}
#MyForm .contact-form .btnContact {
  width: 50%;
  border: none;
  border-radius: 1rem;
  padding: 1.5%;
  background: #dc3545;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
#MyForm .btnContactSubmit {
  width: 50%;
  border-radius: 1rem;
  padding: 1.5%;
  color: #fff;
  background-color: #0062cc;
  border: none;
  cursor: pointer;
}

.input-group {
  position: relative;
  width: 100%;
}
.input-group input {
  position: relative;
  height: 45px;
  border-radius: 30px;
  min-width: 500px;
  box-shadow: none;
  /* border: 1px solid #eaeaea; */
  padding-left: 100px;
}
.input-group label {
  position: absolute;
  left: 0;
  height: 48px;
  background: #55ccf2;
  padding: 0px 25px;
  border-radius: 30px;
  line-height: 48px;
  font-size: 18px;
  color: #fff;
  top: 0;
  width: 100px;
  font-weight: 100;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
  


<!--The content below is only a placeholder and can be replaced.-->

<span id="i">
  <ul class="sticky">
    <li>
      <a
        href="#"
        
        >Home</a
      >
    </li>
    <li>
      <a
        href="#news"
        
        >News</a
      >
    </li>
    <li>
      <a
        href="#contact"
        >Contact</a
      >
    </li>
    <li>
      <a
        href="#about"
        
        >About</a
      >
    </li>
    <li>
      <a
        href="#test"
        
        >Test</a
      >
    </li>

    <ul class="nav navbar-nav pull-right">
      <li class="nav"><a href="#">Contact</a></li>
    </ul>
    <ul class="nav navbar-nav pull-right">
      <li class="nav">
        <a href="#ta" (click)="scrollToElement(con)">Target</a>
      </li>
    </ul>
  </ul>
</span>



  <div #con class="fixed-header">
    <br />
    <br />
    

    <!-- <div  class="input-group">
        <input type="text">
        <label>Some Text</label>
        </div> -->

    <div id="MyForm">
      <div class="container contact-form">
        <div class="contact-image">
          <img src="assets/rocket_contact.png" alt="rocket_contact" />
        </div>
        <form
          [formGroup]="productForm"
          (ngSubmit)="sendMail(productForm.value)"
        >
          <h3>Merci de nous laisser un message</h3>

          <!-- <div class="row"> -->
          <div class="col-md-12">
            <div class="form-group" id="your_name">
              <input
                formControlName="name"
                type="text"
                name="txtName"
                class="form-control"
                placeholder="Your Name *"
                value=""
              />
            </div>
            <div class="form-group">
              <input
                formControlName="email"
                type="text"
                name="txtEmail"
                class="form-control"
                placeholder="Your Email *"
                value=""
              />
            </div>
            <div class="form-group">
              <input
                formControlName="number"
                type="text"
                name="txtPhone"
                class="form-control"
                placeholder="Your Phone Number *"
                value=""
              />
            </div>
          </div>
          <div class="col-md-12">
            <div class="form-group">
              <textarea
                formControlName="message"
                name="txtMsg"
                class="form-control"
                placeholder="Your Message *"
                style="width: 100%; height: 150px;"
              ></textarea>
            </div>

            <div class="form-group">
              <input
                type="submit"
                name="btnSubmit"
                class="btnContact"
                value="Send Message"
              />
            </div>
          </div>
          <!-- </div> -->
        </form>
      </div>
    </div>
  </div>




</body>
</html>

1 个答案:

答案 0 :(得分：3)

当元素具有position: absolute或position: fixed时，可能会与其他元素重叠。发生这种情况时，将在上方渲染的容器将是具有较高z-index值的容器。如果未设置z-index，则它是最低的。

因此，您只需添加：

z-index: 1;

进入您的sticky班：

.sticky {
  position: sticky;
  top: 0;
  z-index: 1;
}
#i ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: blue;
}

#i li {
  float: left;
}

#i li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#i li a:hover {
  border-radius: 0px 0px 10px 10px;
  background-color: rgb(43, 137, 226);
}

.active {
  background-color: rgb(43, 137, 226);
}

#footer-id {
  background-color: blue;
}

#MyForm .contact-form {
  background: #fff;
  margin-top: 10%;
  margin-bottom: 5%;
  width: 70%;
}

#MyForm .fixed-header {
  width: 100%;
  margin: 0 auto;
  position: fixed;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 999;
}

#MyForm .contact-form .form-control {
  border-radius: 1rem;
}
#MyForm .contact-image {
  text-align: center;
}
#MyForm .contact-image img {
  border-radius: 6rem;
  width: 11%;
  margin-top: -3%;
  transform: rotate(29deg);
}
#MyForm .contact-form form {
  padding: 14%;
}
#MyForm .contact-form form .row {
  margin-bottom: -7%;
}
#MyForm .contact-form h3 {
  margin-bottom: 8%;
  /* margin-top: -10%; */
  text-align: center;
  color: #0062cc;
}
#MyForm .contact-form .btnContact {
  width: 50%;
  border: none;
  border-radius: 1rem;
  padding: 1.5%;
  background: #dc3545;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
#MyForm .btnContactSubmit {
  width: 50%;
  border-radius: 1rem;
  padding: 1.5%;
  color: #fff;
  background-color: #0062cc;
  border: none;
  cursor: pointer;
}

.input-group {
  position: relative;
  width: 100%;
}
.input-group input {
  position: relative;
  height: 45px;
  border-radius: 30px;
  min-width: 500px;
  box-shadow: none;
  /* border: 1px solid #eaeaea; */
  padding-left: 100px;
}
.input-group label {
  position: absolute;
  left: 0;
  height: 48px;
  background: #55ccf2;
  padding: 0px 25px;
  border-radius: 30px;
  line-height: 48px;
  font-size: 18px;
  color: #fff;
  top: 0;
  width: 100px;
  font-weight: 100;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
  


<!--The content below is only a placeholder and can be replaced.-->

<span id="i">
  <ul class="sticky">
    <li>
      <a
        href="#"
        
        >Home</a
      >
    </li>
    <li>
      <a
        href="#news"
        
        >News</a
      >
    </li>
    <li>
      <a
        href="#contact"
        >Contact</a
      >
    </li>
    <li>
      <a
        href="#about"
        
        >About</a
      >
    </li>
    <li>
      <a
        href="#test"
        
        >Test</a
      >
    </li>

    <ul class="nav navbar-nav pull-right">
      <li class="nav"><a href="#">Contact</a></li>
    </ul>
    <ul class="nav navbar-nav pull-right">
      <li class="nav">
        <a href="#ta" (click)="scrollToElement(con)">Target</a>
      </li>
    </ul>
  </ul>
</span>



  <div #con class="fixed-header">
    <br />
    <br />
    

    <!-- <div  class="input-group">
        <input type="text">
        <label>Some Text</label>
        </div> -->

    <div id="MyForm">
      <div class="container contact-form">
        <div class="contact-image">
          <img src="assets/rocket_contact.png" alt="rocket_contact" />
        </div>
        <form
          [formGroup]="productForm"
          (ngSubmit)="sendMail(productForm.value)"
        >
          <h3>Merci de nous laisser un message</h3>

          <!-- <div class="row"> -->
          <div class="col-md-12">
            <div class="form-group" id="your_name">
              <input
                formControlName="name"
                type="text"
                name="txtName"
                class="form-control"
                placeholder="Your Name *"
                value=""
              />
            </div>
            <div class="form-group">
              <input
                formControlName="email"
                type="text"
                name="txtEmail"
                class="form-control"
                placeholder="Your Email *"
                value=""
              />
            </div>
            <div class="form-group">
              <input
                formControlName="number"
                type="text"
                name="txtPhone"
                class="form-control"
                placeholder="Your Phone Number *"
                value=""
              />
            </div>
          </div>
          <div class="col-md-12">
            <div class="form-group">
              <textarea
                formControlName="message"
                name="txtMsg"
                class="form-control"
                placeholder="Your Message *"
                style="width: 100%; height: 150px;"
              ></textarea>
            </div>

            <div class="form-group">
              <input
                type="submit"
                name="btnSubmit"
                class="btnContact"
                value="Send Message"
              />
            </div>
          </div>
          <!-- </div> -->
        </form>
      </div>
    </div>
  </div>




</body>
</html>

相关问题
最新问题