How come an absolutely positioned element does not disregard its sibling's position and appears after it?

<div> is styled flexibly, while <section> is inserted within it and formatted statically. However, <section> shows up underneath the lower right corner of the image, rather than at the upper left corner of its flexible parent. I am struggling to comprehend why it fails to disregard its sibling's positioning.

Here is the snippet:

.flex-container {
    display: flex;
}

.static-element {
    position: static;
}

<div class="flex-container">
    <img src="http://placehold.it/270x270" class="img-responsive">
    <span class="label label-primary static-element">Overlay</span>
</div>

Reference image for expected output:

https://i.sstatic.net/sfSY7.png

It seems like I need a clearer understanding of how display:flex and position:static interact in this scenario. Could someone shed light on why the result shown in the image is not being achieved?

csscss-position

Answer №1

The reason for this behavior is related to how the <a> tag is styled using CSS. Typically, it has a style of display: inline. However, when the ancestor element with a position: relative is an inline element, absolute positioning functions differently.

In such cases, the containing block of an element is determined as follows:

  1. If the element has 'position: absolute', the containing block is determined by the closest ancestor with a 'position' of 'absolute', 'relative', or 'fixed', in the following manner:

    1. When the ancestor is an inline element, the containing block becomes the bounding box around the padding boxes of the first and last inline boxes generated for that element. If the inline element spans multiple lines, the containing block remains undefined according to CSS 2.1 specifications.

The inline box created by the <a> (to hold the <img>) has the same height as the line box it's within, regardless of the height of the <img>, which is also inline. Consequently, the absolutely positioned element aligns roughly with the line box where the <img> resides, due to the baseline alignment of the <a>.

To achieve the expected outcome, simply changing the <a> display property to display: block resolves this issue.

Answer №2

If you want to make <a> behave like a box, you need to change it from inline to block or inline-block and specify its width so it can adjust to the content inside it.

Check out this updated jsfiddle for a visual representation: https://jsfiddle.net/1a2b3c4d/

Answer №3

BRAND NEW RESPONSE:

According to @ISuthan Bala's explanation, the <a> element is considered inline, therefore if you want to apply a relative class, you must nest it within an additional DIV inside the <a> tag:

http://codepen.io/anon/pen/VaqmWN

.pos-rel {
    position:relative;
}

.pos-abs {
    display: block;
    position:absolute;
    top:0px; 
    left:0px;
}

<a href="#">
  <div class="pos-rel">
    <img src="http://placehold.it/270x270" >
    <span class="label label-primary pos-abs">Overlay</span>
  </div>
</a>

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

Aligning Description Item components horizontally in antdLearn how to easily horizontally align Description

Currently, I am utilizing the `antd` Description components. In this scenario, when there is no `title` for the items, the value should be aligned to the left. You can see an example of this alignment in the image below: https://i.sstatic.net/Ah70f.png I ...

javascriptcssreactjstypescriptantd

Is there a method to trigger click events on overflow content when clicked?

I am currently tackling a significant issue: I need the drop-down options' width to be wider than where the selected value is displayed, especially in IE7. After conducting some research on Google, I decided to take matters into my own hands and write ...

jqueryhtmlcss

Examining the scroll-down feature button

I'm currently experimenting with a scroll down button on my website and I'm perplexed as to why it's not functioning properly. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" c ...

javascripthtmlcss

Validation of Button Groups and Automatic Disabling after Initial Click with HTML, CSS, and JavaScript

Criteria: Upon clicking a button from the selection of four buttons, all other buttons should become disabled except for the Next button. An alert window must appear when the Next button is clicked without selecting any other buttons, preventing navigatio ...

javascripthtmlcss

Concealing the content of multiple items through sorting with the help of jquery

I need help with hiding the content of all elements while dragging or sorting the list. Can someone assist me with this? Here is my working fiddle. My jQuery code used in the fiddle is: $( function() { $( "#sortable" ).sortable(); $( "#sortable" ).disable ...

jqueryhtmlcssjquery-ui

Chrome experiencing conflicts with backstretch when using multiple background images

In order to dynamically apply fullscreen background images in a WordPress site, I am utilizing Backstretch.js along with a custom field. Everything is functioning properly for the body's background image. However, there seems to be an issue with anot ...

javascriptjqueryhtmlcssgoogle-chrome

Is there a way to shift a button within a div to the right while maintaining alignment?

After spending hours on this problem, I attempted to use "float: right" and successfully moved the button to the right. However, in doing so, the tag is no longer vertically centered. Can someone please assist me with this? Also, if there are multiple sol ...

css

Utilizing window.matchMedia in Javascript to retain user selections during page transitions

I am encountering difficulties with the prefers-color-scheme feature and the logic I am attempting to implement. Specifically, I have a toggle on my website that allows users to override their preferred color scheme (black or light mode). However, I am fac ...

javascriptjquerycssbackgroundlocal-storage

Sliding a div out from the right using jQuery

I am attempting to create a sliding effect from the right on a div using jQuery. I have managed to accomplish part of it, but not exactly as I would like. You can view my code on this JSFiddle. While the div slides out smoothly, the text inside wraps when ...

jquerycss

Tips for aligning elements vertically within a <td> tag

I am looking to vertically align 3 elements within my <td> tag, specifically in the center/middle. These are the elements I want to align: An image button (a tag) with a top arrow image A jQuery slider Another image button (a tag) with a bottom arr ...

htmlcss

The transparency of the TABLE must only be applied to a specific section

I need the table to have a transparent bottom and a clear top for better readability. Here is my attempted solution: .preview { background: -moz-linear-gradient(top, rgba(255,255,255,0) 25%, rgba(255,255,255) 100%); background: -webkit-gradie ...

css

How to arrange three buttons in a row using CSS styling

After reviewing similar issues posted by others, I have not found a solution to my problem. Despite trying the suggested solutions, I am unable to center two buttons representing different departments on my webpage. Here is my source code: <script ...

javascriptjqueryhtmlcss

Alert: CSS 4.0 Warning Validation - The value "rgb(0, 0, 0, 0.4)" is not valid for the "border" property

Wrapping up my asp core 3 project, I've been addressing various warnings that have popped up. However, one particular warning has me stumped. The CSS property in question is functioning perfectly, adding a touch of transparency to the black border. Wh ...

cssasp.net-core

CSS font attribute stylus variable

Can you help me troubleshoot this issue with the variable in stylus that is setting the font attribute using shorthand syntax? button-font = 100 16px Helvetica Neue', Helvetica, Arial, sans-serif I'm encountering the following error message: ...

cssstylus

The appearance of HTML varies depending on the type of mobile device being used

My email template is having display variations on different mobile devices, with the textbox sometimes centered instead of left aligned as intended. Any suggestions on what might be causing this issue and how to resolve it? Desired Display on All Devices ...

javascripthtmlcssresponsive-design

Locate specific text within the content and apply an underline to it

Is there a way to locate specific text on my website and apply an underline to it? Suppose I have some text displayed and I wish to identify all instances of the word hello and underline them. Here is my attempt at the code: $( "body:contains('hell ...

jqueryhtmlcss

Utilizing consistent CSS styles across VueJS components

Currently tackling a VueJS 2 project and facing issues with scoped styling when cleaning up the code. My setup involves 3 components that share similarities, prompting me to utilize mixins for consolidating the code into one file. Each component makes use ...

cssvue.jsscopevuejs2mixins

Replicate and $(document).ready()

My form has required fields that need to be completed. To alert users about blank fields, I have implemented the following code: $(document).ready(function() { $('input.required:text').focus(function() { $(this).css({'background ...

javascriptjquerycss

using angularjs to dynamically apply css styles

Below is the input I have: The HTML code is shown below: <input type="number" ng-class="{negative: amount < 0}" ng-model="amount"/> This is the corresponding CSS code: .negative { color: red; } If the amount is positive, no specif ...

javascripthtmlcssangularjsng-class

The canvas div wrapper flexbox item is in need of scrollbars

I am looking to display a canvas that may be larger than the viewport size. The layout structure will include navigation on the left and controls on the right, with the canvas positioned in between them. When the canvas is too large for the screen, I wan ...

htmlcssflexboxscrollbaroverflow