Is it possible to absolutely position an element using its own bottom edge as a reference point?

Looking to achieve precise positioning of an element just off the top of the screen, specifically a sliding menu. Utilizing position: absolute and top: 0px is straightforward, but this aligns the element based on its top edge.

Is there a way to achieve the same effect using the element's bottom edge?

For instance, if we have:

#foo {
  position: absolute;
  top: 0px;
}

This would result in the following layout:

-------------------------------------------
|              |                          | 
|   id="foo"   |        <body>            | 
----------------                          | 
|                                         | 
|                                         | 
-------------------------------------------

However, is it possible with CSS to obtain the following layout:

----------------
|              |      
|   id="foo"   |  
-------------------------------------------
|                                         | 
|                       <body>            | 
|                                         | 
|                                         | 
|                                         | 
-------------------------------------------

The goal is to position a div at the very top of the document using its bottom edge as reference, taking into account that the height of the content within this div may vary. Can CSS accomplish this type of positioning or does it require additional tools?

csscss-positionabsolute

Answer №1

It appears that you are looking to place the element 100% from the bottom:

Check out this Example

#foo {
    position: absolute;
    bottom: 100%;
}


.parent {
    width: 400px;
    height: 200px;
    margin: 75px;
    position: relative;
    border: 1px solid;
}
.child {
    width: 200px;
    height: 50px;
    background: red;
    position: absolute;
    bottom: 100%;
}
<div class="parent">
    <div class="child"></div>
</div>

Answer №2

To achieve this effect, you can utilize the translateY(-100%) property:

div {
  transform: translateY(-100%);
  background: red;
}
body {
    margin:0;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia porta lacus ac egestas. Nam et elit lacus. Aliquam elementum felis imperdiet arcu commodo sollicitudin. Maecenas quis lectus in risus semper venenatis. Vestibulum eu bibendum diam. Cras
  aliquam elit sit amet dui vehicula, sit amet dignissim nulla convallis. Integer finibus, nisl maximus accumsan congue, ligula eros efficitur magna, ac gravida sapien dolor at leo. Morbi tempus ex lacus. Maecenas fermentum ut nisl at tincidunt. Etiam
  aliquet a ex vitae posuere. Nam ultrices tortor a congue ullamcorper. Quisque sit amet cursus magna, a finibus mauris. Duis at placerat orci, vitae ultrices dolor. Cras posuere, arcu ut ornare pharetra, neque justo aliquam orci, sodales viverra mi massa
  a quam. Morbi sollicitudin justo sapien, congue feugiat arcu vehicula et. Integer faucibus leo sit amet enim efficitur, ac laoreet lectus eleifend. Donec sit amet risus massa. Ut et nunc augue. Cras efficitur tellus sapien, nec viverra leo semper sed.
  Vivamus ut sollicitudin metus. Nulla et bibendum sapien, vel consequat lorem. Phasellus mi diam, fringilla sed iaculis in, aliquam non lorem. Integer ac vestibulum massa, sed aliquet dui. Nulla facilisi. Suspendisse congue tortor ut vestibulum dignissim.
  Vestibulum quis est id est consectetur ultricies. Aliquam vitae suscipit purus.
</div>

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

Am I on the right track in my understanding of how document and viewport relate to mouse position in JavaScript?

After reviewing responses from a previous inquiry, it is evident that both pertain to the x and y coordinates of mouse positions. In relation to the document and In relation to the viewport. I have delved into an article on QuirksMode, yet I feel ther ...

javascriptjqueryhtmlcss

Having issues with Tailwind classes not being applied properly on dynamically generated pages in Gatsby-node

Currently, I am working on building dynamic pages using gatsby-node. The templates for these pages are stored in the templates/ directory. However, I have run into an issue where I cannot utilize tailwind classes within these templates unless they are al ...

cssreactjstailwind-cssgatsbypostcss

Is it possible to disable a function by clicking on it?

I currently have a website that is utilizing the following plugin: This plugin enables an image to be zoomed in and out through CSS transforms, with default controls for zooming in and out. My goal is to incorporate a reset button that returns the image ...

javascriptjquerycss

Tips for designing a sleek and seamless floating button

I attempted to implement a floating button feature that remains in view while smoothly flowing using jQuery. I followed a tutorial I found online to create this for my website. The tutorial can be accessed at this link. However, after following all the ste ...

javascriptjqueryhtmlcss

What is the best way to use CSS to connect the tips of shapes for perfect alignment?

In an attempt to utilize CSS3 for creating shapes and aligning them to resemble a certain image, I have successfully crafted a pink square along with 4 gray rectangles. Initially, my approach involved creating separate div elements for each shape and adjus ...

htmlcss

Element remains hidden when position set to relative

I have created a panel inside a container class. The panel's CSS is as follows: .panel { width: 100%; background: url(img/launch1.png); height: 80%; background-size: cover; background-position: center; position: relative; ...

htmlcss

What adjustments can be made to the Bootstrap code to prevent it from causing layout issues with the Signin Form and Footer?

Recently, I've encountered some challenges with the footer formatting on my website's home page and the sign-in form on a separate page. It appears that the Bootstrap framework at the top of the page is affecting these elements exclusively. How c ...

htmlcssbootstrap-4frontend

Foundation 6: Alignment issues with Top Bar

Exploring Foundation 6 and trying out the sample code. I'm puzzled as to why the "Site Title" is not in alignment with the rest of the top-bar, it seems to be slightly higher up. <div class="top-bar"> <div class="top-bar-title"> ...

csshtmlzurb-foundationzurb-foundation-6

Is it possible to execute this animation with a single click for repetitive playback?

CODEPEN const btt = document.querySelector('.btt'); btt.addEventListener('click', function(){ this.classList.toggle('anime'); }); Is there a way to achieve the desired effect with just one click? ...

javascripthtmljquerycsscss-animations

Select a division and retrieve the identification of a different division

I am looking to trigger an event by clicking on one element and extracting the ID from a separate, unrelated div. Here is my attempt: $(".map_flag").on("click",function(){ var selectedID = ($(this).attr("data_modal")); $("#" + selectedID).fade ...

javascriptjqueryhtmlcss

Resolving the Blank Space Problem in DataTable CSS Styling

I encountered an unusual issue while working with DataTable in my project. Here's a link to view my DataTable example I have also attached a picture illustrating the problem I am facing. Is there a way to remove the blank space containing filter but ...

jqueryhtmlcssdatatable

Hover animation using CSS is a great way to add interactivity

I'm trying to create an animation in a moving box that flips upside down when the mouse is raised. I've attempted to use keyframes and hover to achieve this effect, but it's not working as expected. Any suggestions on how to make it work? ...

htmlcss

Unusual shadow cast by the box's silhouette

I am currently facing an issue with a box and its shadow. When I close the box, a different shadow lingers behind. I have tried troubleshooting this problem but cannot pinpoint the source. I have included the relevant code files in the specified folders. I ...

javascripthtmlcss

Showcasing all elements of an xml through jquery while implementing a filter

Trying to implement a filter on XML using jQuery. The filtered results are showing based on the condition, but facing difficulty in displaying all XML items when the flag is set to 0; meaning that when the flag is zero, all XML items should be displayed ...

jquerycsshtml

Tips for maintaining the webcam video in the center of the screen even when the height is set to 100% and the window is being resized

When using React, I encountered an issue with centering a webcam video while maintaining its height at 100% of the screen. Although the video fills the screen vertically correctly, adjusting the width of the window causes the video to lose its centered pos ...

htmlcssreactjs

Steps for modifying the CSS style of a div element following an onclick event:

<html> <head> <style type="text/css"> .step_box { border: 1.0px solid rgb(204, 204, 204); border-radius: 10.0px 10.0px 10.0px 10.0px; } .step_box:hover{ background: rgb(184, 225, 252); } .selected { background-color : #fff000; ...

javascriptjqueryhtmlcss

CSS Trick: Applying first-of-type selector to specific instances of a div

I'm currently grappling with how to specify that a 'first-of-type' should only be present on specific instances of a div. For instance, suppose I have a class called ".maintext" and in some cases I want the first paragraph to feature a dropc ...

csscss-selectors

Having trouble getting a DIV to appear on top of another DIV containing an image

I need help with positioning an "InfoBox" above the main header image on my website. Despite trying z-indexes and adjusting position, I can't seem to get it right. If anyone has any suggestions, please share. Thank you! For reference, here is the HTM ...

csshtml

How can I align images of varying sizes to the bottom using Bootstrap 4 or CSS?

I'm having an issue with CSS align-xxxx:bottom not working. I want to align images of different heights at the bottom. .width-book{ width: 100px; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="s ...

csstwitter-bootstrapbootstrap-4

What is the best way to position my two icons next to each other in the footer of my React application?

I'm struggling with styling the footer of my react portfolio project. I specifically want to include Github and LinkedIn icons side-by-side at the bottom of the screen, but currently, they are stacked vertically in the middle of the page with too much ...

cssreactjssingle-page-applicationreact-bootstrapfooter