Is it impossible to use CSS for absolute positioning of text?

I am currently learning CSS and HTML, as I'm working on a project for my final school assignment.

My goal is to position the text "Welcome" absolutely within a specific div that I've created. However, despite multiple attempts, I can't seem to get it to align correctly with its parent container.

The desired outcome is for the "Welcome" text to appear at the bottom of the welcome div. Unfortunately, when I include bottom:0px; in the CSS code, it doesn't adhere to its intended position relative to the container and ends up being placed 0px from the top of the entire screen.

Here is the relevant code snippet:

#wrapper {
  height: 1000px;
  margin: 0 auto;
  background-image: url(images/background.jpg);
  background-size: 100% 100%;
}

#header {
  height: 150px;
  position: relative;
  background-color: red;
}

#welcome {
  position: absolute;
  bottom: 0;
  width: 420px;
  height: 100px;
  background-color: green;
}

.w {
  height: 150px;
  position: absolute;
  font-size: 64px;
  left: 20px;
  bottom: 0px;
  color: #fff;
}
<div id="wrapper">
  <header id="header">
    <div id="welcome">
      <p class="w">Welcome</p>
    </div>
    <nav id="main nav"></nav>
  </header>
</div>

htmlcss

Answer №1

You are so close to the solution! Just make sure to take away the height from the .w paragraph tag and also remove its margin:

#wrapper {
  height: 1000px;
  margin: 0 auto;
  background-image: url(images/background.jpg);
  background-size: 100% 100%;
}

#header {
  height: 150px;
  position: relative;
  background-color: red;
}

#welcome {
  position: absolute;
  bottom: 0;
  width: 420px;
  height: 100px;
  background-color: green;
}

.w {
  /*height: 150px;*/
  margin: 0;
  position: absolute;
  font-size: 64px;
  left: 20px;
  bottom: 0px;
  color: #fff;
}
<div id="wrapper">
  <header id="header">
    <div id="welcome">
      <p class="w">Welcome</p>
    </div>
    <nav id="main nav"></nav>
  </header>
</div>

Answer №2

The issue, pointed out by CalvinNunes, is that the .w div has a height set. Additionally, p elements have default values for margin and line-height. To resolve this, you should eliminate the margin and adjust the line-height to be less than 1 (e.g., .5 will bring the text in contact with the bottom of the green box).

#wrapper {
  height: 1000px;
  margin: 0 auto;
  background-image: url(images/background.jpg);
  background-size: 100% 100%;
  position: relative;
}

#header {
  height: 150px;
  background-color: red;
  position: absolute;
  width: 100%;
}

#welcome {
  position: absolute;
  bottom: 0;
  width: 420px;
  height: 100px;
  background-color: green;
}

.w {
  position: absolute;
  font-size: 64px;
  left: 20px;
  bottom: 0px;
  color: #fff;
  margin: 0;
  line-height: 1;
}
<div id="wrapper">

  <header id="header">

    <div id="welcome">
      <p class="w">Welcome</p>
    </div>

    <nav id="main nav">
    </nav>

  </header>

</div>
<!-- End of wrapper-->

Answer №3

When applying the absolute property to an element, it is important that the related DOM element has a positioning of either relative, absolute, or fixed, depending on the desired layout. Additionally, make sure to review the styling of your absolute element to avoid any unnecessary margins.

In your specific scenario, I don't believe using absolute positioning is necessary. Instead, consider increasing the padding of the parent element at the top. Another alternative could be utilizing flex-end, which provides flexibility for dynamic text input.

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

Tips for retrieving the count from HTML using JavaScript:

I need to determine the count of list items in an unordered list within dir-pagination-controls. How can I achieve this using JavaScript? <dir-pagination-controls min-size="1" direction-links="true" boundary-links="true" class="pull-right ng-isolate- ...

javascriptjqueryhtmlangularjs

Finding the Xpath for an element that contains only a span tag, with identical attributes except for the text within

I am struggling to find the xpath for a button element that says 'Cancel'. <div class="uipresk"> <button class="something" role="button" type="button"> <span class="thisthing">OK</span> </button> ...

c#htmlxmlseleniumxpath

What caused the mat-date calendar style to malfunction?

I integrated mat-date into my Angular project, but encountered an issue where the styles of the calendar were not displaying properly when clicking the icon. Here is the displayed calendar effect I attempted to troubleshoot by commenting out the styles o ...

cssangularmaterial-uiangular-materialmat-datepicker

When the HTML code is rendered in a web browser, the CSS styles are not being

I am utilizing adminer within a docker container. When testing services, I utilize the URL mydomain.tld. In order to interact with this container directly, one option is to expose and map a port, such as mapping port 8081 to the adminer port 8080. Access ...

cssdockerbrowseryawsadminer

html carousel not updating in popover

I've been attempting to create a popover with a bootstrap carousel, where the carousel items are dynamically generated and appended from a script. Despite my efforts, I have successfully displayed the carousel but struggle to append the items. I' ...

javascripthtmljquerycarouselbootstrap-5

Ways to acquire ttf files from a third-party domain without encountering CORS issues

I am attempting to obtain a .ttf file from an external website for use in my web application. However, when I try the following code: @font-face { font-family: 'font'; src: url('http://xxx.xyz/resources/tipografias/font.ttf') forma ...

javascriptjqueryhtmltomcatcors

In HTML, discover a sneaky way to conceal the video progress bar

I'm having trouble using webkit and it's not working for me #videoP::-webkit-progress-value { display: none; } #videoP::-webkit-progress-bar { display: none; } This is the code I have for my video in HTML <video id="videoP&quo ...

htmlcsshtml5-videoprogress-barwebkit

Get the input tag's value prior to submitting the form

After the user enters a number into an input tag in my HTML code, I need to immediately retrieve that value for mathematical calculations. I intend to use the "onchange" form event to trigger a PHP function responsible for performing the calculation before ...

phphtmlforms

Is there a way to show output on render rather than using console.log in node.js?

I have successfully sorted the objects as shown in the link below. My next challenge is to integrate the sorted object into my render function rather than just using console.log(). I'm uncertain if converting it back into an object is the right appro ...

javascripthtmlcssnode.jsexpress

What is the best way to position two elements inline?

I was trying to create a container named project-item that looks like the image linked below: https://i.stack.imgur.com/6XzZ9.png My goal was to align the project logo and the title (h3) in one line, but I struggled to find a suitable solution. This is ...

htmlcss

What is the best way to hide the input field when there are multiple parent classes present?

I am currently implementing dynamic fields with jQuery and everything is functioning correctly. The problem arises when I attempt to remove these fields. After searching on Google and browsing past questions on StackOverflow, I noticed that everyone seems ...

javascriptjqueryhtml

I recently discovered how to modify the video source (src) within an html5 source tag, but I am encountering varied outcomes when using it within a function or with inline javascript

When attempting to change the src of a video tag using Javascript, I encountered an issue. The code works fine when placed inline, but as soon as I try to include it within a function or in the "onclick" event of a button tag, nothing happens. There are no ...

javascripthtmlvideo

Guide to updating 2 iframes simultaneously with a single link/button using HTML and JavaScript

Just joined the community and looking for help on how to refresh two different iframes within a single page. I came across a solution on Google that involves using getElementById. However, I've heard Firefox can be tricky with IDs. Appreciate any as ...

javascripthtmliframerefresh

The challenge of styling React components

Starting a new project with React and Redux has presented me with the challenge of deciding on a styling method. As a newcomer to React, I want to choose a method that won't compromise performance, will offer all CSS3 features, and is easy to maintain ...

cssinline-stylescss-modulesradium

Steer clear of utilizing CSS pseudo-elements like :before and :after

I am seeking a solution to hide a <label> when viewing on a small mobile device. Below is the HTML code: <label class="page_createpassword_label" for="page_createpassword"> <span class="page_label_main">Span Text</span> <span c ...

csscss-positionpseudo-element

"Guide to triggering the display of a particular div based on its class when clicked

I have multiple div elements with the class name dis HTML: <div class="dis">Content</div> <div class="dis">Content</div> <div class="dis">Content</div> and so on ... Additionally, there are various images: <img sr ...

javascripthtmlcss

Adding static files to your HTML page with node.js

This is not a question about using express.static() In my application, I have multiple pages that share the same JS and CSS dependencies. Instead of adding <script> or <link> tags to every single page, I'm looking for a way to include the ...

javascriptphphtmlcssnode.js

Placing a logo to the left of a UL list

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> & ...

jqueryhtmlcss

What could be causing the fluctuation in ui-grid height as I scroll horizontally?

After using ui-grid in numerous projects without any issues, I recently encountered a strange issue when working with a large number of columns. With approximately 50 columns, as I scroll from left to right in order to view the columns that are off-screen ...

htmlangularjscssangular-ui-gridui-grid

Tips for implementing resizable Material-UI Dialogs

I'm working on a project that involves creating a dialog box that can be resized and dragged. While I found steps in the Material-UI Dialog documentation on how to make it draggable, I'm still looking for information on how to make it resizable. ...

javascriptcssreactjsmaterial-ui