位置：绝对； p标签不会从底部变成opx吗？

时间：2018-11-30 03:26:33

标签： html css

我无法在p的section属性中获得div class="sf sf_2标记，以使其从该div的底部变为0 px，我不确定为什么吗？它从顶部，右侧，左侧而不是底部移动0像素？我尝试了一下它的位置，看它是否会受到影响，但没有任何结果，而且我还尝试更改它的内容，但我真的不确定是什么引起了问题。任何建议都值得赞赏。

/* color:#00a786 lighter green */
/* color:#005242 dark green for buttons */
/* color:003027 dark green background */




*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }
  html{
      background-color: #fff;
    }

body{
 
      margin:0 auto;
      font-family: arial, helvetica, sans-serif ;
    }

a{
  text-decoration: none;
  color:#fff;
}
li{
  display: inline;
  padding: 10px;
  font-size: 16px;
  color:#fff;
}
/* --------------------------------HEADER------------------------------------- */
header{
  background-image:linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(../img/heder_photo_2.jpg);
  background-size: cover;
width: 636px auto;
  
  min-height: 110vh;
background-attachment: fixed;
position: relative;
left: -20px;
right: -20px;

 z-index: 80; 

}

.row{
  padding-top: 40px;
  border-bottom: 2px solid white;


}

}
/* --------------------------------TOP-LEFT------------------------------------- */
.top-left{

  float:left;
}
.top-left ul {
  font-size: 16px;
  padding-left: 150px;
  padding-top: -80px;
  padding-bottom: 30px

}


/* -------------------------------SOCIAL-LINKS------------------------------------- */
.social-links ul {
display:inline;
padding-left: 150px;

}
.social-links li{
  font-size: 100%;


}

.social-links li:hover,
.social-links li:active{
  border-bottom: 2px solid #00a786;
  transition: border-bottom 0.2s;
}



/* -------------------------------TOP-RIGHT------------------------------------- */
.top-right{
  float:right;

}
.top-right  {
float: right;
padding-bottom: 30px;
}


.top-right li {
  font-size: 100%;
  font-weight: 200;
}
  .top-right li:hover,
  .top-right li:active{
color:#005242;
  transition: color 0.2s;
}


.top-right li:first-child{
  border-left: 2px solid #fff;
  border-width: thin;
}
.top-right li:last-child{
  border-left: 2px solid #fff;
  border-width: thin;
}
/* -------------------------------H1------------------------------------- */

.main-header{
  padding-top: 30px;
  padding-left: 130px;
  float:left;

}
.header-text{
  display: inline-block;
}

h1{
font-size: 90%;
  color:#fff;
  font-family: sans-serif;


}
span{
  color:#00a786
}

/* -------------------------------MAIN-NAV------------------------------------ */
.main-nav{
  float: right;
  padding-right: 30px;
  padding-top: 40px;
}
.main-nav-links{
  display: inline-block;
}

.main-nav-links li:hover,
.main-nav-links li:active{
  border-bottom: 2px solid #00a786;
  transition: border-bottom 0.2s;

}
/* -------------------------------MAIN-SECTION------------------------------------ */
.main-section{




}
.main-content{
  text-align: center;


}
.content{
  padding-top: 50px;
  color: #fff;
  display:inline-block;
}
.content h2{

  font-size: 100%;
}

.content p{
  font-size: 60%
}

/* -------------------------------BUTTONS------------------------------------ */

.btn:link,
.btn:visited,
  input[type=submit]{
    display: inline-block;
    padding :10px 30px;
    margin-top: 60px;
    font-size: 60%;
    font-weight: 300;
    text-decoration: none;
    border-radius: 5px;

    transition: background-color 0.2s,border 0.2s,color 0.2s;
    msargin-right: 15px;
}

.btn-full:link,
.btn-full:visited,
input[type=submit]{
    background-color: #00a786;
    border: 1px solid #005242;
    color: #fff;

  }
    .btn-full:hover,
    .btn-full:active,
    input[type=submit]{
        background-color: #005242;
        border: 1px solid #005242;
        color: #fff;

    }


    .search-btn,
      input[type=submit]{
        display: block;
        padding :15px 20px;

        font-size: 60%;
        font-weight: 300;
        text-decoration: none;
        border-radius: 5px;
        width: 100px;
        height: 40px;
        transition: background-color 0.2s,border 0.2s,color 0.2s;

    }

  .search-btn,
    input[type=submit]{
        background-color: #00a786;
        border: 1px solid #005242;
        color: #fff;

      }
      .search-btn:hover,
    .search-btn:active,
        input[type=submit]{
          border: 0px solid #fff;
            color: #fff;

        }


/* -------------------------------form search------------------------------------ */
    .main-Search{
      background-color: #003027;
      border: 2px solid #003027;
      border-radius: 3px;
      position: absolute;
      left:200px;
      right:20px;
      top: 500px;

      width: 600px;
      /*z-index: 99;*/

}
   .main-Search{
padding:30px 10px;
  display: inline;
   }
  /* -------------------------------Section-properties-----------------------------------*/

  .section-properties{
   position: relative;
   top: 150px;
    text-align: center;
  }

 .sf{
  position: relative;
  top:120px;
  height:270px;
  width: 330px ;

 }
  .sf_2{
    position: relative;
    left:80px;
    top:120px;
    height:270px;
    width: 330px ;
  background-image:url(../img/sf-2.jpeg)
   }
/* this is the for rent notice class and the common properties*/
   .fr{
     position: relative;
     text-transform: uppercase;
     display: inline;
    color: #fff;
    border:#00a786;
    
  padding: 7px 13px;
  border-radius: 2px;
  font-size: 12px;
  background-color:#00a786;

   }
/* fr-notice  = for rent notice*/
.fr-notice{
  left:-100px;
  top:30px;
}

.sf_2 p,
.sf_2 h2 {
  font-family: sans-serif;
  font-size:1rem;
  font-weight: 400;
  color:#fff;
  float: left;
 position: absolute;
 top:60px;
   }

   .sf_2 p{
    bottom:0px;
   }
/*
.sf-3 p{
  position: absolute; 
  color:#fff;
}
.sf-4 p{
  position: absolute; 
  color:#fff;
}
.sf-5 p{
  position: absolute; 
  color:#fff; */
}
   
   
<!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
      <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
      <link rel="stylesheet" type="text/css" href="vendors/">
       <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
      <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
      <link rel="stylesheet" type="text/css" href="css/styling.css">
      <link rel="stylesheet" type="text/css" href="vendors/fonts/Aileron/">
      <title>Williams Rental Propertie's</title>
</head>
<body>
  <header>
    <!--- TOP LEFT-------->
    <div class="row">
    <div class="top-left">
      <ul>
        <li>  <i class="fas fa-phone-volume icon-contact ">(312)343-8748</i></li>
        <li><i class="far fa-envelope icon-contact">WilliamsRentalProperties</i></li>
      </ul>
    </div>
    <!--- SOCIAL LINKS-------->
    <div class="social-links">
        <ul>
          <li><a href="#"><i class="fab fa-facebook-f"> </a></i></li>
          <li><a href="#"><i class="fab fa-twitter"></i></a></li>
          <li><a href="#"><i class="fab fa-instagram"></i></a></li>
          <li><a href="#"><i class="fab fa-pinterest-square"></i></a></li>
          <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
        </ul>
    </div>
    <!--- TOP RIGHT-------->
    <div class="top-right">
        <ul>
          <li><i class="fas fa-user "> <a href="#"> Register</i></a></li>
          <li> <i class="fas fa-sign-in-alt"><a href="#">Login</i></a></li>
        </ul>
    </div>
</div>
    <!--- main Header-------->

    <div class="main-header">
      <div class="header-text">
        <h1>Williams <span> Rental</span> Properties</h1>
    </div>
  </div>

  <nav class="main-nav">
    <div class="main-nav-links">
      <ul>
        <li> <a href="#"> Home</a></li>
        <li> <a href="#"> Featured List</a></li>
        <li> <a href="#"> About Us</a></li>
        <li> <a href="#"> Pages</a></li>
        <li> <a href="#"> Blog</a></li>
        <li> <a href="#"> contact</a></li>
      </ul>

    </div>

  </nav>

  <section class="main-section">
    <div class="main-content">
      <div class="content">
        <h2>Let Us Find You Your Dream Home!</h2>
        <p>Search real estate property records, houses, condos, land and more .
Find property info from the most comprehensive source data.</p>
     <a class="btn btn-full" href="#">View Details</a>


    
      <div class="main-Search">
     <form class="Search" action="index.html" method="post">
      <label for="address"></label>

        <!--- city-------->

      <input type="text" name="Search" placeholder="keyword,zipcode">

        <!--- city-------->

      <label for="city"></label>
    <select class="city" name="city">
      <option value="city">city</option>
      </select>

        <!--- state------->

      <label for="state"></label>
    <select class="state" name="state-form">
      <option value="state">state</option>
</select>
  <!--- search button------->
  <button class="search-btn" href="#">Search</button>
    </form>
  </div>

      </div>
    </div>
  </section>
  </header>

  


<!--- SECTION PROPERTIES------->
  <section class="section-properties">
  
<h2>RECENT PROPERTIES</h2>
<p>Discover how much the latest properties have been rented for</p>
<div
class="sf sf_2">
<div class="fr fr-notice">for rent</div>

<p>Rochester, NY 14626</p>





  </div>
  </section>

</body>
</html>

3 个答案:

答案 0 :(得分：0)

您的<p>标签在section-properties中位于底部，因为标头占据了所有高度。这是因为您已将标题的最小高度指定为110vh。

vh等于视口的初始包含块的高度的1％。

答案 1 :(得分：0)

您必须将top: auto;设置为.sf_2 p，就像之前为其设置top: 60px;一样。
运行以下代码段：

.section-properties {
  position: relative;
  text-align: center;
}

.sf {
  position: relative;
  height: 270px;
  width: 330px;
}

.sf_2 {
  position: relative;
  height: 270px;
  width: 330px;
  background-image: url(https://s3-media3.fl.yelpcdn.com/bphoto/Pc6S8vtv9Kk5OXmbPrTxlg/ls.jpg);
  background: solid 1px red;
}


/* this is the for rent notice class and the common properties*/

.fr {
  position: relative;
  text-transform: uppercase;
  display: inline;
  color: #fff;
  border: #00a786;
  padding: 7px 13px;
  border-radius: 2px;
  font-size: 12px;
  background-color: #00a786;
  font-family: sans-serif;
}


/* fr-notice  = for rent notice*/

.fr-notice {
  top: 30px;
}

.sf_2 p,
.sf_2 h2 {
  font-family: sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #fff;
  position: absolute;
  top: 60px;
}

.sf_2 p {
  top: auto;
  bottom: 0px;
}
<div class="sf sf_2">
  <div class="fr fr-notice">for rent</div>
  <p>Rochester, NY 14626</p>
</div>

答案 2 :(得分：0)

/* color:#00a786 lighter green */
/* color:#005242 dark green for buttons */
/* color:003027 dark green background */




*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }
  html{
      background-color: #fff;
    }

body{
 
      margin:0 auto;
      font-family: arial, helvetica, sans-serif ;
    }

a{
  text-decoration: none;
  color:#fff;
}
li{
  display: inline;
  padding: 10px;
  font-size: 16px;
  color:#fff;
}
/* --------------------------------HEADER------------------------------------- */
header{
  background-image:linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(../img/heder_photo_2.jpg);
  background-size: cover;
width: 636px auto;
  
  min-height: 110vh;
background-attachment: fixed;
position: relative;
left: -20px;
right: -20px;

 z-index: 80; 

}

.row{
  padding-top: 40px;
  border-bottom: 2px solid white;


}

}
/* --------------------------------TOP-LEFT------------------------------------- */
.top-left{

  float:left;
}
.top-left ul {
  font-size: 16px;
  padding-left: 150px;
  padding-top: -80px;
  padding-bottom: 30px

}


/* -------------------------------SOCIAL-LINKS------------------------------------- */
.social-links ul {
display:inline;
padding-left: 150px;

}
.social-links li{
  font-size: 100%;


}

.social-links li:hover,
.social-links li:active{
  border-bottom: 2px solid #00a786;
  transition: border-bottom 0.2s;
}



/* -------------------------------TOP-RIGHT------------------------------------- */
.top-right{
  float:right;

}
.top-right  {
float: right;
padding-bottom: 30px;
}


.top-right li {
  font-size: 100%;
  font-weight: 200;
}
  .top-right li:hover,
  .top-right li:active{
color:#005242;
  transition: color 0.2s;
}


.top-right li:first-child{
  border-left: 2px solid #fff;
  border-width: thin;
}
.top-right li:last-child{
  border-left: 2px solid #fff;
  border-width: thin;
}
/* -------------------------------H1------------------------------------- */

.main-header{
  padding-top: 30px;
  padding-left: 130px;
  float:left;

}
.header-text{
  display: inline-block;
}

h1{
font-size: 90%;
  color:#fff;
  font-family: sans-serif;


}
span{
  color:#00a786
}

/* -------------------------------MAIN-NAV------------------------------------ */
.main-nav{
  float: right;
  padding-right: 30px;
  padding-top: 40px;
}
.main-nav-links{
  display: inline-block;
}

.main-nav-links li:hover,
.main-nav-links li:active{
  border-bottom: 2px solid #00a786;
  transition: border-bottom 0.2s;

}
/* -------------------------------MAIN-SECTION------------------------------------ */
.main-section{




}
.main-content{
  text-align: center;


}
.content{
  padding-top: 50px;
  color: #fff;
  display:inline-block;
}
.content h2{

  font-size: 100%;
}

.content p{
  font-size: 60%
}

/* -------------------------------BUTTONS------------------------------------ */

.btn:link,
.btn:visited,
  input[type=submit]{
    display: inline-block;
    padding :10px 30px;
    margin-top: 60px;
    font-size: 60%;
    font-weight: 300;
    text-decoration: none;
    border-radius: 5px;

    transition: background-color 0.2s,border 0.2s,color 0.2s;
    msargin-right: 15px;
}

.btn-full:link,
.btn-full:visited,
input[type=submit]{
    background-color: #00a786;
    border: 1px solid #005242;
    color: #fff;

  }
    .btn-full:hover,
    .btn-full:active,
    input[type=submit]{
        background-color: #005242;
        border: 1px solid #005242;
        color: #fff;

    }


    .search-btn,
      input[type=submit]{
        display: block;
        padding :15px 20px;

        font-size: 60%;
        font-weight: 300;
        text-decoration: none;
        border-radius: 5px;
        width: 100px;
        height: 40px;
        transition: background-color 0.2s,border 0.2s,color 0.2s;

    }

  .search-btn,
    input[type=submit]{
        background-color: #00a786;
        border: 1px solid #005242;
        color: #fff;

      }
      .search-btn:hover,
    .search-btn:active,
        input[type=submit]{
          border: 0px solid #fff;
            color: #fff;

        }


/* -------------------------------form search------------------------------------ */
    .main-Search{
      background-color: #003027;
      border: 2px solid #003027;
      border-radius: 3px;
      position: absolute;
      left:200px;
      right:20px;
      top: 500px;

      width: 600px;
      /*z-index: 99;*/

}
   .main-Search{
padding:30px 10px;
  display: inline;
   }
  /* -------------------------------Section-properties-----------------------------------*/

  .section-properties{
   position: relative;
   top: 150px;
    text-align: center;
  }

 .sf{
  position: relative;
  top:120px;
  height:270px;
  width: 330px ;

 }
  .sf_2{
    position: relative;
    left:80px;
    top:120px;
    height:270px;
    width: 330px ;
  background-image:url(../img/sf-2.jpeg)
   }
/* this is the for rent notice class and the common properties*/
   .fr{
     position: relative;
     text-transform: uppercase;
     display: inline;
    color: #fff;
    border:#00a786;
    
  padding: 7px 13px;
  border-radius: 2px;
  font-size: 12px;
  background-color:#00a786;

   }
/* fr-notice  = for rent notice*/
.fr-notice{
  left:-100px;
  top:30px;
}

.sf_2 p,
.sf_2 h2 {
  font-family: sans-serif;
  font-size:1rem;
  font-weight: 400;
  color:#000;
  float: left;
 position: absolute;
 top:60px;
   }

   .sf_2 p{
    bottom:0px;
   }
/*
.sf-3 p{
  position: absolute; 
  color:#fff;
}
.sf-4 p{
  position: absolute; 
  color:#fff;
}
.sf-5 p{
  position: absolute; 
  color:#fff; */
}
<!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
      <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
      <link rel="stylesheet" type="text/css" href="vendors/">
       <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
      <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
      <link rel="stylesheet" type="text/css" href="css/styling.css">
      <link rel="stylesheet" type="text/css" href="vendors/fonts/Aileron/">
      <title>Williams Rental Propertie's</title>
</head>
<body>
  <header>
    <!--- TOP LEFT-------->
    <div class="row">
    <div class="top-left">
      <ul>
        <li>  <i class="fas fa-phone-volume icon-contact ">(312)343-8748</i></li>
        <li><i class="far fa-envelope icon-contact">WilliamsRentalProperties</i></li>
      </ul>
    </div>
    <!--- SOCIAL LINKS-------->
    <div class="social-links">
        <ul>
          <li><a href="#"><i class="fab fa-facebook-f"> </a></i></li>
          <li><a href="#"><i class="fab fa-twitter"></i></a></li>
          <li><a href="#"><i class="fab fa-instagram"></i></a></li>
          <li><a href="#"><i class="fab fa-pinterest-square"></i></a></li>
          <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
        </ul>
    </div>
    <!--- TOP RIGHT-------->
    <div class="top-right">
        <ul>
          <li><i class="fas fa-user "> <a href="#"> Register</i></a></li>
          <li> <i class="fas fa-sign-in-alt"><a href="#">Login</i></a></li>
        </ul>
    </div>
</div>
    <!--- main Header-------->

    <div class="main-header">
      <div class="header-text">
        <h1>Williams <span> Rental</span> Properties</h1>
    </div>
  </div>

  <nav class="main-nav">
    <div class="main-nav-links">
      <ul>
        <li> <a href="#"> Home</a></li>
        <li> <a href="#"> Featured List</a></li>
        <li> <a href="#"> About Us</a></li>
        <li> <a href="#"> Pages</a></li>
        <li> <a href="#"> Blog</a></li>
        <li> <a href="#"> contact</a></li>
      </ul>

    </div>

  </nav>

  <section class="main-section">
    <div class="main-content">
      <div class="content">
        <h2>Let Us Find You Your Dream Home!</h2>
        <p>Search real estate property records, houses, condos, land and more .
Find property info from the most comprehensive source data.</p>
     <a class="btn btn-full" href="#">View Details</a>


    
      <div class="main-Search">
     <form class="Search" action="index.html" method="post">
      <label for="address"></label>

        <!--- city-------->

      <input type="text" name="Search" placeholder="keyword,zipcode">

        <!--- city-------->

      <label for="city"></label>
    <select class="city" name="city">
      <option value="city">city</option>
      </select>

        <!--- state------->

      <label for="state"></label>
    <select class="state" name="state-form">
      <option value="state">state</option>
</select>
  <!--- search button------->
  <button class="search-btn" href="#">Search</button>
    </form>
  </div>

      </div>
    </div>
  </section>
  </header>

  


<!--- SECTION PROPERTIES------->
  <section class="section-properties">
  
<h2>RECENT PROPERTIES</h2>
<p>Discover how much the latest properties have been rented for</p>
<div
class="sf sf_2">
<div class="fr fr-notice">for rent</div>

<p>Rochester, NY 14626</p>





  </div>
  </section>

</body>
</html>

选中这个。

相关问题
最新问题