Employing absolute or relative positioning alongside CSS pseudo elements

I am fairly new to CSS and I am trying to create a speech bubble using a span tag, but I want it positioned relative to the parent div container.

Is there a way to achieve this without it affecting the display of the pseudo element?

HTML (example):

<div id='divcontainer'> 
  <span> </span>
</div>

CSS

#divcontainer  { position: relative; }

span  {
    /* The span tag should be placed relative to the div. */
    position: relative;                
    left: 18px;
    top: -15px;
    
    white-space: nowrap;
    font-size: 12px;
    background: white;
    border: 1px solid white;
    border-radius: 7px;
    padding-bottom: 5px;
    visibility: hidden;
}

span:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 45%;
    width: 0;
    height: 0;
    border: 18px solid transparent;
    border-top-color: white;
    border-bottom: 0;
    border-left: 0;
    margin-bottom: -10px;
}

Any tips or guidance on how to accomplish this would be greatly appreciated!

htmlcsscss-positionpositioningpseudo-element

Answer №1

To properly position the child element, it is recommended to use absolute positioning.

#divcontainer {
    position: relative;
}
span {
    position: absolute;             
    left: 18px;
    top: -15px;
}

When an element is set with absolute positioning, it is placed absolutely in relation to its first positioned parent. In this scenario, the first positioned parent is identified as #divcontainer.

Answer №2

Using position: absolute;, you have the ability to apply this style attribute to both the child element (span) and its pseudo-element. By positioning them in relation to the parent element with a relatively positioned container, their placement will also be relative to each other.

#divcontainer { position: relative; width: 200px; height: 200px; background: #ddd; } span { position: absolute; left: 30px; top: 85px; white-space: nowrap; font-size: 12px; background: white; border: 1px solid white; border-radius: 7px; padding-bottom: 5px; } span:after { content: ''; position: absolute; bottom: 0; left: 45%; width: 0; height: 0; border: 18px solid transparent; border-top-color: white; border-bottom: 0; border-left: 0; margin-bottom: -15px; } 
<div id = 'divcontainer'> 
  <span>THE SPAN ELEMENT</span>
</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

Formatting Outlook HTML Signatures

I'm currently designing an HTML email signature for Outlook, but I'm having trouble with formatting and ensuring it looks consistent across different devices. When I preview the HTML in my browser, it appears exactly as I intended. However, I am ...

htmlcssoutlooksignature

Remove class using jQuery when clicked for the second time and also disable hover effect on the second click

I'm trying to implement a feature that removes the 'active' class when a checkbox is clicked for the second time, similar to how Pinterest handles checkboxes for Twitter and Facebook. Here's what I have tried so far: $(".add_link_twitt ...

javascriptjquerycssclassjquery-selectors

Highcharts legend incorrectly concealing data

The issue with my highcharts legend is that it does not function correctly. I have 2 series, each with different names. When I click on 'series1' in the legend, the data for 'series1' disappears, leaving 'series2' visible. How ...

javascriptjqueryhtmlhighcharts

I encountered an issue with my JavaScript variable not being able to accept the object that was passed through the Django render() method

While attempting to retrieve a Django object in JSON format and assign it to a JavaScript variable, I encountered an issue. Utilizing the predefined method from django.core import serializers available in Django, I converted the object into JSON format. Wh ...

javascripthtmljsondjangopython-3.x

What are the steps to create a dynamic grid interface using Bootstrap 5?

I attempted to use the code below but it did not work: <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div c ...

htmlcssbootstrap-5

When an accordion is clicked, the content is dynamically loaded within the accordion on the page using PHP, jQuery, and AJAX

To optimize the loading speed of my information-filled page connected to two databases using php, javascript, jquery, I'm looking for a way to make the upload process faster. Currently, some data is displayed immediately while other details are hidden ...

javascriptphpjqueryhtmlajax

Issues arise when the elements <html> and <body> fail to adhere to a 100

Lately, I've been struggling with various problems related to heights. I was able to resolve the height issues of certain elements using flex:auto and flex-shrink:0. However, I'm facing difficulties getting the HTML and Body tags to cooperate ( ...

htmlcssheight

Tips for seamlessly integrating an Instagram post into your website without adjusting the container size

I'm trying to include an Instagram photo or video post within my WordPress article. It displays correctly on the desktop version, but on mobile devices, it causes the container to expand and everything appears smaller. Check out this screenshot of th ...

htmlcsswordpressinstagram

Avoiding additional empty lines between selectors when setting up Stylelint

Can anyone help me with configuring Stylelint options? Specifically, I want to enforce a rule that no empty lines are allowed between selectors in a list of selectors: &:focus, &:hover, &.active { color: #fb3a5e; text-align: left; text-de ...

cssfrontendstylelint

Incorporating the <script type="text/javascript" src="bootstrap-4.4.1/js/bootstrap.min.js"></script> file into the code

I am having trouble understanding the purpose of including 'bootstrap4.4.1/js/bootstrap.min.js' link in my HTML code within a script tag. Can someone please explain its significance? ...

javascripthtmlbootstrap-4

The parent's height dynamically adjusts based on the height of its visible children using only CSS

I am dealing with the following structure: <div class="body"> <div class="wrapper"> <div class="dialog"> <div class="content-0"></div> <div class="content-1&quo ...

javascripthtmlcss

In PHP/HTML, if the URL is domain.co.uk/?debug, then the following action will

Apologies for what may seem like a basic question, but I've been searching for a clear answer with no luck! My goal is simple - when someone goes to , I want to show extra details, like the code version or any other notes I include. Once again, sorr ...

phpjavascripthtmldebuggingurl

Hide the #loading element when the <input> field is devoid of content

Sample - jsfiddle.net/75CqW/ Upon clicking the Submit button, the loading div is displayed even when the input field is empty. I attempted to add "required" to the input field to prevent the loading div from showing when it's empty, but it's st ...

javascriptjqueryhtml

Phantom writing reminiscent of the ghostly prose found on a Tumblr registration

Is there a way to create a URL field similar to the one on ? It's the field where the text is faded and when you click on it to type, it automatically appends ".tumblr.com" that cannot be erased or highlighted. The JavaScript used for this feature is ...

javascriptjquerycss

FusionCharts Gauges may share similar code, but each one produces a unique output

Currently, I am developing a project that involves creating a dashboard with 3 gauges. These gauges are enclosed in bootstrap cards with a column value set to 4. In the layout of the dashboard, these 3 cards are positioned next to each other. I have succe ...

javascripthtmllaravel

Is there a way to determine if the tab has been muted by the

Chrome enables users to easily mute tabs by right-clicking on them and selecting Mute Tab. I am curious about whether there is a method to detect when a user has muted the tab. In other words, I am interested in knowing if it's possible for a website ...

javascripthtmlgoogle-chrome

What is the best way to position a row of divs above their parent div?

Need guidance on placing a row of divs (each with 3 columns of images) on top of a parent div (image) using Bootstrap 5. Previously used position: absolute, but encountering overflow issues. Attempted overflow: visible as well. Provided below is the code s ...

htmlcsstwitter-bootstrapbootstrap-5

Using jQuery to make sorting elements on a webpage, adjust the "clickAt" attribute for better functionality

I am working with a draggable list of items set up like this: <ul id="dadCol_0" class="dad-list ui-sortable"> <li class="dad-item ui-draggable" id="sl1" style="position: relative;">1</li> <li class="dad-item ui-draggable" id="sl2" sty ...

jqueryhtmldrag-and-drop

Tips for automatically collapsing the Bootstrap 4 Sidebar on smaller devices

I am currently working on some code and have successfully hidden the sidebar using a collapse button. However, I am looking to make it collapse only for small devices, similar to how the bootstrap navbar functions. <link href="https://stackpath.boots ...

htmlcssbootstrap-4responsivesidebar

Storing JSON data within a fabric.js canvas

Is there a way to import and modify multiple SVG files, then save the JSON data to a database? I attempted to use the following code: canvas.item(0).sourcePath = '/URL/FILE.svg'; JSON.stringify(canvas.toDatalessJSON()); However, this me ...

javascriptjsonhtmlcanvasfabricjs