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>

htmlcss

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

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 №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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can we ensure only one click event is executed per element type in jQuery?

Here's the issue: I have a list of items with their own content organized in lists. Using jQuery, I've set it up so that when you click on an item, the list expands to show its content. However, when clicking on another item, the previously click ...

javascriptjqueryhtml

Switch Button Hyperlink in HTML/CSS

I have the following code: document.addEventListener("DOMContentLoaded", function(event) { (function() { requestAnimationFrame(function() { var banner; banner = document.querySelector('.exponea-banner3'); banner.classList ...

javascripthtmljquerycssanimation

Styling with CSS or using tables: What should you choose?

Is there a way to replicate the frame=void functionality in CSS, or will I need to manually add frame=void to each table I create in the future? <table border=1 rules=all frame=void> I attempted to search for a solution online, but unfortunately, m ...

htmlcss

Tailwind.css - a "sticky" element is positioned outside of the parent "wrapper" element

Seeking your kind assistance. I am facing an issue where a fixed element is being displayed outside the parent container on large screens, as it is treated as "fixed" from the viewport rather than relative to its parent element. Any suggestions on how to ...

htmlvue.jsfrontendtailwind-csscss-position

Endless rotation with stunning magnification feature

My goal is to create a responsive carousel with auto-play infinite loop functionality, where the center item always occupies 70% of the viewport width. Currently, I have achieved a similar result using the Slick library: https://codepen.io/anon/pen/pBvQB ...

javascriptjqueryhtmlcss

Tips for maintaining selected text while a modal window is active

So I'm currently working on a document writer and I'm utilizing document.execCommand to insert links. What I aim for is the ability for a user to select/highlight text, click a button to add a link to that specific text (via a modal), and then ha ...

javascripthtmlangulartypescript

How can I successfully use the Confluence REST API to publish a dynamically generated HTML table (created with PHP) without encountering the problematic HTTP

I am striving to build a page within a Confluence wiki that contains a table created using the provided REST API, which can be conveniently edited by wiki users using the WYSIWYG editor once the page is established. To achieve this, I have organized vario ...

phphtmlrestconfluenceconfluence-rest-api

JavaScript salary calculation function not functioning properly

Once the user inputs the employee's name and the number of hours they worked on the HTML form, the submit button captures this information and stores it in variables for calculating their pay. The script also factors in overtime pay. Despite feeling l ...

javascripthtmlfunction

The audio must start playing prior to being forwarded to a new page

As I delve into the world of website development on my own, I have encountered an interesting challenge. At the top of my webpage, I have embedded an audio file within a button. If the user chooses to mute the audio, the navigation links will remain silent ...

javascriptcsshtmlaudio

How to modify the background image of a div using CSS from a specific folder

<head id="Head1" runat="server"> <title>Title</title> <style> .parallax { /* The image used */ background-image: url(Pictures/BackUS.png); height: 100%; /* Create the parallax scrolling effect */ back ...

htmlcss

Position divs to align text beside icons

I am currently working on a Bootstrap popover to display various pieces of information, each containing an icon and some text. Additionally, I am incorporating twig into this project. Here is the HTML structure: <span class="fa fa-user instructor-con ...

htmlcsstwig

When attempting to transmit data to the server, an error message pops up in the DevTools console of the browser. The error is displayed as "Network Error at create

I am currently utilizing React JS for the front end of my web application and PHP for the back end. When I try to send data to the server upon clicking a button on the webpage, I encounter the following error: Network Error at createError (createError.js:1 ...

phphtmlreactjsaxios

The symbiotic partnership between JSF bean and the dynamic capabilities of HTML

As I develop my project in JSF using Primefaces 4.0 and a Tomcat 7 server, I encounter the need to retrieve an image from a MS SQL database and apply clickable areas on it. The coordinates for each area are also obtained from the database. Unfortunately, t ...

htmljsfhtml5-canvas

If the div is visible in the viewport, then automatically scroll to the top

Struggling to locate online resources for this particular technique. In my JSFiddle, users can navigate through fullscreen divs using 'next' or 'prev', as well as scrolling to access the next or previous divs. The issue arises when us ...

jqueryhtmlcss

An issue occurred when retrieving the input value during a (change) event within a nested *ngFor loop in Angular

Within my table, I have implemented a nested loop using the *ngFor directive: <tbody> <tr *ngFor="let dept of salesTarget; let i = index"> <td>{{dept.dept}}</td> <td *ngFor="let month of monthList; ...

htmlangular

Comparing v-show(true/false) and replaceWith: Exploring the best practice between Vue and jQuery

Currently, I am in the process of learning vue.js and have a question regarding the best approach to implement the following scenario: The main query is whether it is acceptable in HTML to write <span></span> followed by a <textarea>< ...

javascriptjqueryhtmlvue.js

Looking for an API to retrieve random quotes and images from a website?

Greetings, my name is Antika. I recently embarked on a coding journey and have been focusing on learning HTML/CSS along with the basics of JS. Level of Expertise: Beginner During my exploration, I stumbled upon this intriguing website - . It stands out a ...

javascripthtmlcssreactjsapi

Can someone guide me on how to create scrolling effects for my content? [html/css]

insert image description here Image dedicated to MrXQ I require assistance in verifying the accuracy of the following code - all content displayed below has been altered from the original for privacy concerns My objective is to have the headers scroll o ...

htmlcss

The space residing above my primary container division

I recently finished creating a basic web app, but I'm encountering an issue with the smallest media query where there is an unwanted top gap. Despite trying multiple methods and researching solutions online, I have not been able to resolve this proble ...

htmlcssresponsive-design

Learning how to utilize localStorage in conjunction with a color picker to modify the --var of :root

After spending an entire afternoon on my JavaScript issue as a beginner, I have a specific goal in mind: allowing the user to select and change the main color of the page. To implement this, I inserted a color picker in my HTML: <input type="color ...

javascripthtmlcss