What is the similarity between an image without a position and the "absolute" keyword in CSS?

Take a look at this code snippet :

HTML :

<div style="position: absolute; visibility: visible; width: 172px;">
    <img class="inf-image" align="right" src="http://www.ilritaglio.it/wp-content/uploads/2012/02/wee.jpg">
    
    <div class="inf-content">
        Hello        
    </div>   
</div>

CSS :

.inf-image
{
    position: relative;
    cursor: pointer;
    margin: 3px 8px 0px 0px;  
    width:20px;   
}

.inf-content {
    background-color: #FF0000;
    padding: 10px;
    width: 150px;
    height:50px;
}

It seems like the relative div is positioned under the absolute image. This is leading to an unexpected display. Ideally, the div should be pushed down by the height of the image.

htmlcss

Answer №1

When elements float (such as an <img align="right">), they only affect the content of block elements, not their backgrounds. This means that the underlying red background of the div will still be visible behind the image.

Answer №2

Understanding CSS stacking context is crucial. When an element is given a position other than static, it creates its own stacking context. This means that the element with 

.inf-image { position: relative; }
is no longer considered a child of the parent DIV or a sibling to .inf-content. Instead, it becomes a separate DIV nested within another DIV (the red one). The image essentially floats within its own context right beneath the HTML root element, positioning itself relative to the element that comes before it in the source code.

The order in which elements appear on top of each other can be determined by a combination of position and z-index.

Read more about CSS stacking context at: https://developer.mozilla.org/en/Understanding_CSS_z-index

Learn about stacking in CSS at:

Answer №3

Your HTML and CSS code indicate that your div is set to have an absolute position, while your image has a relative position. This inconsistency is likely causing the issue you are experiencing.

<div style="position: relative; visibility: visible; width: 172px;">
    <img class="inf-image" src="http://www.example.com/image.jpg">

    <div class="inf-content">
        Hello        
    </div>   
</div>

.inf-image
{
    position: absolute;
    cursor: pointer;
    margin: 3px 8px 0px 0px;  
    width: 20px;
    right: 0;
}

.inf-content {
    background-color: #FF0000;
    padding: 10px;
    width: 150px;
    height: 50px;
}

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

How can I update the color of table rows after the ng-repeat has been implemented?

My current project involves Django, Python, and a bit of AngularJS. I have a dynamic history table that grows as data is added. I am looking to apply some simple CSS to this table - specifically, I want to give every even-numbered row a black background ...

javascriptpythoncssangularjsdjango

Enable CDATA support in ActionView::Base.full_sanitizer

One method I found helpful was using the ActionView::Base.full_sanitizer.sanitize(value) to remove HTML content. It generally works well, but there is an issue when the value passed into the method is wrapped in <![CDATA[ and ]]> because it returns a ...

htmlruby-on-railsrubycdata

Having trouble making a Bootstrap 4 input-group with beta 3 prepend/append function properly

When working with Bootstrap 4 Beta 3, I encountered some challenges with the Beta 3, particularly with the input-group-append and input-group-prepend classes. I struggled with placing these classes at the end of my input group. The last button in my inpu ...

htmlbootstrap-4

Tips for retrieving user input and displaying it on an HTML page

I have encountered an issue with displaying user input in a table. The code for the table display is as follows: <tr ng-repeat="user in users" ng-class-even="'bg-light-grey'" ng-if="isLoading==false"> <td> ...

javascripthtmlangularjs

Incorporate a widget with dynamic height adjustment

We are currently working on creating a widget that can be easily embedded by third-party websites. Our goal is to have the widget automatically adjust its height through the embed script. Initially, we considered using an IFrame generated by our JavaScrip ...

javascriptjqueryhtmlembed

Is it possible to alter the value and label of an HTML button in a permanent manner?

I am developing a personalized management system that records your activities from the previous day based on the buttons you clicked. I have successfully implemented the ability to edit these activity buttons using jQuery, but I would like these changes to ...

javascriptasp.nethtml

Creating dynamic animations by shifting the hue of an image on a canvas

Recently, I've been exploring the world of canvas tags and experimenting with drawing images on them. My current project involves creating a fake night/day animation that repeats continuously. After trying various approaches like SVG and CSS3 filters ...

javascripthtmlcanvascolorshue

Creating a dropdown list with a pre-selected item in HTML is a simple task

I have two items in a dropdown menu, and I only want the data for the selected item to appear. Is there a way to make one item's data appear by default? HTML code: <div class="box-header"> <div class="dropdown" align="left"> ...

htmlbootstrap-4

Vertical stacks of DIVs suddenly vanish

I am currently creating a map grid using HTML/CSS with the following layout: #map { position: absolute; top: 2vw; bottom: 2vw; left: 2vw; right: 2vw; overflow: visible; background : blue; } .map-row { width: 100%; ba ...

htmlcss

Selenium: A guide to specifying CSS for webpages with multiple elements sharing the same name

Looking for assistance with CSS selection: <table id="userPlaylistTable" cellspacing="0" cellpadding="0"> <div class="numCellWrapper"> ... When defining a css selector, how can I target a specific element among multiple elements of the same ...

cssselenium

Is there a way to access an HTML element using Vue's methods?

Here is an example of my Vue component structure: <template> ... </template> <script> export default { methods: { buildDescription () { if (!this.description) { const div = document.createEl ...

javascripthtmlvue.jsvuejs2vue-component

Obtain the href attribute using Selenium in Python

I'm trying to extract all href links from the subelements within a parent class called search-content. The parent class contains divs with the class card-col, and within these divs, there is another div followed by an href link. I only want to retriev ...

pythonhtmlseleniumparsingxpath

Creating an event within a class that is generated dynamically when hovering

I'm trying to create a hover effect where an image moves around the page in a pattern (top left corner -> top right corner -> bottom right corner -> bottom left corner -> then back up to the top left corner). To achieve this, I am adding ...

javascriptjqueryhtmlcssajax

The hyperlink for social media is not functioning properly within a list element

Having some trouble with the href-tags for social media on my contact page. Clicking on them doesn't seem to do anything. Any ideas on what might be causing this issue? html { height: 100%; box-sizing: border-box; background-color: #001725; ...

csshtmlhrefbrackets

The slide experiences overflow as it continuously slides up and down

Hey everyone, I've been working on creating a slider effect when a button is clicked. Details about a specific part appear in a designated div upon button click. However, I've encountered a bug where, if I click quickly on different slides, the c ...

javascriptjqueryhtml

What is the best way to combine a custom CSS class and a bootstrap class to style an element in next.js?

In the following example, the CSS class is imported and then applied to the element: import customStyles from "./Home.module.css"; <div className={(customStyles.collection, "card")}> Although they work individually, when combined as shown above, t ...

cssnext.js

Blog Format Featuring Side-by-Side Columns

Is there a way to achieve horizontal columns that don't cut off articles and flow seamlessly into the next column? I want the columns to have varying heights, such as Post A at 60% height, followed by Post B at 40% height, then Post C at 30%, and fina ...

htmlcss

Troubleshooting the non-responsive behavior of Bootstrap's hidden-sm-down

Why are the two images within the <div> with hidden-sm-down still visible on my laptop when I resize the page? I need them to be hidden on small devices for a different menu layout. <div class="row"> <div class="col-m ...

htmlcsstwitter-bootstrap

Utilizing the power of JQuery AJAX and PHP to retrieve information from a MySQL database

Currently, I am facing an issue where my PHP code in the api.php file (under Joomla) is not returning the expected data. Below is the snippet of the code: <?php require_once( 'includes/defines.php' ); require_once( 'includes/framework.ph ...

phpjqueryhtmlajaxjoomla

Include the preset value within the textarea input box

I am looking to set a default value in the Textarea field. When the user enters text, I want the default value to always be included with the text. Similar to Fiverr, where the text "I will" is added automatically when the user enters a title. For refer ...

phphtml