Position an element with absolute positioning to the right edge of a relative element

I have a situation where I need to align the end of a position absolute element with the end of a relative element, but the relative element's width is not fixed and may vary based on content.

This scenario arises as I am creating a custom dropdown menu. The relative element serves as the label displaying the selected text, while the position absolute element represents the dropdown itself.

<div class="container">
 <div class="text">Text from list</div>
 <ul class="list">...</ul>
</div>

The image provided illustrates the desired alignment. How can I achieve this using only CSS?

javascripthtmlcss

Answer â„–1

.parent-element {
position:relative;
min-height: 60px;
background:#BB9A9B;
}
.absolute-element {
position: absolute;
right: 0;
    top: calc(100% + 15px);
min-width: 120px;
min-height: 60px;
background: blue;
}
<div class="wrapper">
<div class="parent-element">
parent-element
<div class="absolute-element"></div>
</div>
</div>

Answer â„–2

.box {
    padding: 0.75rem 1rem;
    border: 1px solid navy;
    background-color: dodgerblue;
    color: white;
    margin: 10px 0px;
}

.container {
    position: absolute;
    right: 0px;
}

.relative-box {
    position: relative;
 }

.absolute-box {
    position: absolute;
    min-width: 200px;
    right: 0px;
}

    <div class="container">
      <div class="box relative-box">Relative Box</div>
      <div class="box absolute-box">Absolute Box</div>
    </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

What are the steps to achieve consistent response behavior in POSTMAN that matches that of a web browser?

Below is an example of my code: const express = require('express'); const app = express(); app.get('/', function (req, res) { res.setHeader('Content-Type', 'text/html'); res.write("First \n"); set ...

javascriptnode.jsasynchronouspostmansettimeout

Select the date that is three months from now using the datetimepicker feature of Bootstrap

I have two datetimepicker fields for selecting a start date and end date. I am utilizing the eonasdan datetimepicker plugin for Bootstrap. I am trying to set the range from the current date up to 3 months ahead. However, when I use maxdate:'+90d&apo ...

phphtmltwitter-bootstrapdatetimepicker

Maintaining Styles After Focus is Removed in CSS: A Guide

The CSS that styles our buttons is as follows: .btn-outline-primary { color: blue; border: 1px solid blue; background: transparent; transition: all 0.3s ease 0s; } .btn-outline-primary:hover, .btn-outline-primary:focus { background: ...

cssangularjsbuttonfocus

"Material-Table does not have the ability to insert a new row

Just started learning JS and React. I'm attempting to integrate Material-table with an add row button, but encountering issues where the added row is not reflecting. Every time I refresh the page, the rows are reset. I suspect there's a problem w ...

javascriptreactjsmaterial-uimaterial-table

Information submitted through an ajax request does not get saved in the $_POST array

After successfully executing an AJAX request using GET, I decided to try POST this time. However, when attempting to send data, a baffling error message appeared in the console - NS_ERROR_XPC_JSOBJECT_HAS_NO_FUNCTION_NAMED: 'JavaScript component does ...

phpjavascriptajaxpost

Avoiding Navbar Link Clicks due to Z-Index

Is it possible for the z-index or positioning of an element to hinder a user from clicking on a navbar link? When I visit my website , I find that I am unable to click on any of the links in the navigation bar. Could this be due to the z-index or position ...

jqueryhtmlcsscss-positionz-index

Conceal a different CSS class if a certain CSS class is present on the page

I am currently working on organizing my page to distinguish between purchased and unsold products. For the items that have been bought, I am using the CSS class "winning_bid" within a div element. My goal is to hide another div with the class "price" if th ...

javascriptcsswordpress

What is preventing my CSS Animation from activating on my website?

Is there something in the code preventing the animation from working properly? .projectLinks a{ background-color: var(--secondary-color); color: var(--main-color); padding: 2px 4px 4px 4px; border-radius: 15px; margin-right: 25px; text-decorati ...

cssanimationcss-animationscss-transitions

Having trouble running tests on the Express.js server

I'm struggling to run basic tests on my expressjs server and close it immediately. I have exported the server as a promise, but can't seem to figure out how to achieve this. Below is the code for my server file : index.js const config = require( ...

javascriptnode.jsexpressmocha.js

Issue with Angular 8: click event is not triggering when using ngFor directive to iterate through arrays of objects

Update: The original post has been modified to omit implementation details and complexity. I am facing an issue with an ngFor loop that invokes a method on a service. The method returns an array which is then iterated over by the for loop. The click even ...

javascriptangulartypescriptclick

The application of CSS transition fails in the context where top property is set as auto

I have been exploring an online tutorial that almost met my requirements. However, I encountered a challenge with the CSS 'transitions' effects. Basically, I need the text to be positioned at a specific distance from the top because the title wi ...

htmlcsscss-transitions

Ways to conceal images until AFTER the completion of the jquery flexslider loading process

After trying to integrate wootheme's Flexslider on my website, I encountered a small issue with its loading process. Whenever the page is refreshed with the slider, there is a brief moment (approximately 1 second) where the first slide appears overly ...

javascriptjqueryflexsliderwoothemes

What is the best way to add table pagination at the bottom of a table?

Can someone provide guidance on implementing table pagination for the material-ui table below? The documentation is a bit unclear: <Table ria-label="a dense table"> <TableHead> <TableRow> ...

javascriptreactjsmaterial-ui

determining the user's position within the <s:select> element

I have a dropdown select tag in my code with a list of countries. I want the user's country to be auto-selected when they access the page. This is the JSP code snippet: <s:select name="dropdown" list="countries" listKey="value" listV ...

javascripthtmlgoogle-mapsgoogle-maps-api-3struts2

Preserve jQuery-enhanced webpage changes permanently

I am looking to permanently save modifications made on an HTML page using JQuery. I have come across suggestions about achieving this by sending an Ajax call and storing the data in a database table. However, I am unsure about what exactly needs to be save ...

javascriptjquerymysqlajax

Exploring Vue JS: Decoupling variables in separate files and effective ways of accessing them

In my Vue project, I am looking to create a dedicated .js file to store multiple variables that can be easily accessed by other components. I am seeking advice on the most efficient method to achieve this and would greatly appreciate any examples provide ...

javascriptvue.js

Manipulating the size of one div automatically adjusts the size of the other, as they are

I have encountered an issue while trying to manage two resizable divs. I am looking for a solution where changing the size of one div will automatically adjust the size of the other div along the grid, and vice versa. Currently, I am only able to achieve ...

htmlcss

The script for choosing pages is malfunctioning

I'm having trouble with a script on my website. It works on the index page, but not on other pages. <div id="pages"></div>   <script>      a = location.href;      b = a.split('-');      c = b.length;    ...

javascriptjqueryajax

Steps to make the placeholder in an MUI TextField component move to the top of the box instead of staying within the border:

I'm working on styling a text field in MUI to achieve the look shown in the image below: However, my current implementation looks like this: Currently, when I click inside the text field, the placeholder slides up and is positioned within the border ...

javascriptcssreactjsmaterial-ui

Node.js equivalent of hash_hmac

I am facing an issue while trying to sign the URL in a Node.js application similar to how it is done in my PHP app. In PHP, I use the following code to sign the URL: private static function __getHash($string) { return hash_hmac('sha1', $stri ...

javascriptphpnode.jsamazon-s3sign