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

Question

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.

https://i.sstatic.net/L2sLP.jpg

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?

javascript html css

Answer 1

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

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

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>

Answer 4

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

Answer 5

Answer №3

Flex-box would be my suggestion for this scenario. If you need a quick reference, check out this cheat sheet: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 6

Flex-box would be my suggestion for this scenario. If you need a quick reference, check out this cheat sheet: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

Answer №1

Answer №2

Answer №3

Similar questions

Organizing data in a database the arrangement way

Tips for detecting the creation of an iframe before executing any javascript code

A guide on incorporating Vue.js into a Hexo static site generator

Display the form-control field only when a selection has been made in the previous form-control using HTML and PHP

Implementing real-time style changes with Angular 6 through Environment Variables

Ensure the beginning and ending times are accurate for newly added input fields using jQuery

Open $_POST in a new tab that has been edited for your convenience

"Function.click operates successfully when no arguments are given, but encounters issues when arguments are supplied

What are some alternative methods for downloading the latest file version without relying on the client cache?

JavaScript User Information Lookup Module

Having trouble getting the img file to show up in the img tag - the src URL is not updating

Error: Unable to locate sportsRecord due to missing function

Insert HTML elements into nested CSS classes

Retrieve information from arrays within objects in a nested structure

Is there a reason why async functions do not function properly within a controller's get() handler?

HTML: Determine the Precise Location of a Div Element That is Centered

Error: Uncaught ReferenceError - 'channel' has not been defined

Can you explain the distinction between sockets and proxy passing in nginx compared to uwsgi?

``The importance of properly formatting a text string before encoding it into

Expanding a website banner slide to fill the entire width of the page