Is the p tag not becoming absolute from the bottom even when set to position: absolute?

Question

Is the p tag not becoming absolute from the bottom even when set to position: absolute?

My p tag in the section properties of div class="sf sf_2 won't align to 0 px from the bottom of the div. It seems to move 0px from the top, right, and left but not bottom. I've tried changing its position property and where it's nested, but haven't been able to solve the issue yet. Any suggestions or advice would be greatly appreciated.

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

...


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

...

.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)
}

...

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
        ...
            <section class="main-section">
                ...
                    <form class="Search" action="index.html" method="post">
                        ...
                    </form>
                </div>
            </section>
        ...
    </body>

html css

Answer 1

Answer №1

The reason why your <p> tag in section-properties is pushed to the bottom is because the header has a min-height of 110vh, causing it to take up all the height.

vh represents 1% of the viewport's initial containing block height.

Answer 2

The reason why your <p> tag in section-properties is pushed to the bottom is because the header has a min-height of 110vh, causing it to take up all the height.

vh represents 1% of the viewport's initial containing block height.

Answer 3

Answer №2

To fix the issue, you need to adjust the CSS for .sf_2 p by setting top: auto; since you previously set it to top: 60px;.
Try running the code snippet below:

.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;
}


/* Styles for the for rent notice class and 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; /* Adjusted to fix the issue */
  bottom: 0px;
}

<div class="sf sf_2">
  <div class="fr fr-notice">for rent</div>
  <p>Rochester, NY 14626</p>
</div>

Answer 4

To fix the issue, you need to adjust the CSS for .sf_2 p by setting top: auto; since you previously set it to top: 60px;.
Try running the code snippet below:

.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;
}


/* Styles for the for rent notice class and 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; /* Adjusted to fix the issue */
  bottom: 0px;
}

<div class="sf sf_2">
  <div class="fr fr-notice">for rent</div>
  <p>Rochester, NY 14626</p>
</div>

Answer 5

Answer №3

/* color:#00a786 for a lighter shade of green */
/* color:#005242 for a darker green used in buttons */
/* color:003027 for a 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/header_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;
}

/* More CSS styles can be added here as needed*/

<!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 Properties</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="#"&
.gt;<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="#"&
gt;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>

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

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

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

      </div>
    </div>
  </section>
  </header>
</body>
</html>

Take a look at this updated version.

Answer 6

/* color:#00a786 for a lighter shade of green */
/* color:#005242 for a darker green used in buttons */
/* color:003027 for a 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/header_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;
}

/* More CSS styles can be added here as needed*/

<!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 Properties</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="#"&
.gt;<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="#"&
gt;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>

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

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

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

      </div>
    </div>
  </section>
  </header>
</body>
</html>

Take a look at this updated version.

Is the p tag not becoming absolute from the bottom even when set to position: absolute?

Answer №1

Answer №2

Answer №3

Similar questions

How to enable drag-and-drop functionality for an iframe?

Achieving fixed width and automatic height for images in Next JS: a guide

Personalized design for the range input in React

What is the best method for creating uniform cards with different amounts of text that won't cause overflow issues?

Is it possible to isolate specific HTML elements within a designated area?

How to export HTML table information to Excel using JQuery and display a Save As dialog box

The method of document.getElementsByName does not provide any results

[php][html] stuck on trying to solve this error

Achieving full screen height at 100% with the CSS property of display: table along with table-cell tag

Discussing the use of local identification within a <BASE> tag in SVG specifically on the Firefox browser

Changing text on a button with JavaScript toggle functionality: A step-by-step guide

Insert a new store into an existing IndexedDB database that is already open

Guide to making a toggle button with a Light/Dark mode functionality

Tips for creating a vertical drawer using jQuery and CSS

Issues with the aligning of buttons using the justify-content property

Having trouble retrieving an object property in HTML or TypeScript within an Angular framework?

Retrieving the value of a select option from an HTML form using the $_POST method

Animating rows in the grid auto property

Is there a way to prevent links from opening in an iframe and have them open in the main window instead?

Are my Angular CLI animations not working due to a version compatibility issue?