Ways to apply a different CSS style when the main div is hidden

Struggling to apply a specific style to a div? Let me provide some context: I have 2 divs in a webapp - one serves as a popup notification resembling the IOS style, while the other is an image displaying product updates. Whenever a product is updated, a popup notification appears near the corner of the image.

The issue arises with aligning the popup div #popupContact and the image div .imatges3 using padding-top: -28px to match the alignment with other images. Upon clicking either the popup or the image, the popup disappears causing the image div to shift upwards due to the applied padding-top.

Is there a way to dynamically assign a different CSS value to a div based on whether another div is hidden or not?

Thank you.

Example:

<div class="imatges3" id="pop"><div id="popupContact"><span class="boton">3</span></div>        
    <a href="actualizacion.html">  
       <img src="actprod.png" alt="Product Updates" border="0">
    </a>    
</div>

and css

.imatges3 {
    float: left;
    width: 100px;
    margin-left: 4px;
    margin-right: 2px;
    margin-top: -28px;
}

#popupContact{
   display:none;
   height:20px;
   width:20px;
   z-index:200;
   font-size:13px;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 8px;
   color: #ffffff;
   padding: 0px 0px;

   position: relative;
   top:30px;
   left:75px;   
}

Answer №1

Experimenting with the given CSS code for both div elements:

position:absolute;

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

Switching a conditional className to a styled component

Currently, I am in the process of converting my project from plain CSS to styled components using styled-components. So far, I have successfully converted all of my components except for one. I have looked at various examples on Stack Overflow but none of ...

Align Bootstrap components to the bottom of the page

html <div class="container"> <div id="movies" class="well"> <div class="col-md-3"> <div class="well text-center"> <img src="#"> <h5> ...

Incorporating a flexible header size and scrollable content: Tips for avoiding the need to scroll through the entire page to find

I am currently working on creating a unique page template that has certain requirements: The height of the header may vary The content and aside containers should be independently scrollable Anchor links should not disrupt the page layout To see what I h ...

The elements in the navigation bar stay in view for a short period of time even after the collapsible navbar has been

After collapsing the navbar, the navbar items remain visible for a short period of time, as shown in the second image below. Here is the HTML code: <nav class="navbar navbar-dark fixed-top" style="background-color: transparent;> <a class="navb ...

Issues with Windows font rendering when using @font-face in CSS

Encountering issues with @font-face on Windows computers, regardless of the browser used. The fonts display properly on Linux and OSX. Below is the CSS code I'm currently using (generated with font-squirel) Review the screenshots for the identified ...

I am interested in showcasing a card when it is hovered over

I am having trouble with a hover effect to display a hidden card. I have two div elements, one is labeled single-album and the other hide. I used the + selector to set the hide div to display none initially, but the hover effect is not working as expecte ...

Issue with anchor tags in absolute positioned divs

I recently added social media icons inside a container div on my Wordpress website and it seems to have caused issues with my anchor tags. I'm not sure what I'm doing wrong. When you inspect the social media icons near the top of the page, you c ...

Problem with items overlapping in hoverable drop-down menu

I have been attempting to create a hoverable dropdown menu, but I am encountering an issue where the items of the dropdown are overlapping. Despite my efforts to adjust the CSS classes, I have not been successful in fixing this problem. Additionally, I ha ...

Update the appearance by utilizing ngModelChange

Is it possible to style an element using ngModelChange? I attempted the following method, but it was unsuccessful <input class="input" [(ngModel)]="counter" (ngModelChange)="$event > 2 ? [style.border-color]='#ff4d4d' : [style.border-color ...

What is the HTML code to display a table and a video/image side by side?

I'm facing a challenge while trying to create a website. I want to place a table in the center of the page, with videos on either side of it. However, whenever I attempt this, the table ends up below the videos instead of being aligned with them. I&ap ...

I require a modification in the style of every anchor element found within a div containing the designated class

In a div with the class fview, there is a nested element called iNside which contains a span. Additionally, there are anchor elements within another span, ul li, and another div, among others. I want all anchor elements to have the same style. I tried app ...

CSS background-image property should not alter the size of the first image

I am attempting to ensure that two images have the same dimensions without altering the size of the first image. My current code looks like this: background-image: url("1.png"), url("2.jpg"); background-position: 3% 10%, 83% 27%; background-size: auto, ...

Only the first column of a row in Flexbox will have a line break when exceeding the

Currently, I am utilizing flex with a row direction for a set of items with fixed widths causing overflow and a horizontal scrollbar, which is the desired outcome. Nevertheless, my requirement is for the first column in these rows to be full-width, while ...

Run various CSS animations repeatedly

I recently created a captivating text fade-in, fade-out animation consisting of four lines. Each line elegantly appears one after the other, creating a mesmerizing effect. However, there's now a request to have these animations run in an infinite loop ...

Guide on aligning icons to the right within Bootstrap 4 dropdown elements with the help of CSS flexbox

Is there a way to create the menu below using Bootstrap 4 so that the icon on the right always stays visible, while the text is automatically truncated with an ellipsis (...) when it overflows? <li class="nav-item dropdown"> <a href='#&a ...

Looking for a list that you can edit with CSS styling?

I'm struggling to create a flexible list that can be easily modified. My goal is to have an ordered list with unique labels such as 1,2,3,4,5,6,7,8,9,0,A,B,!,# Although I've managed to number the list items, I am stuck on adding the extra label ...

The hidden DIV containing an ASP.NET CheckBox consistently yields a value of false

I have a group of form elements located within a hidden div which looks like this: <div id="jDivUpdateFolder" style="display:none;"> <asp:TextBox ID="txtEditFolderName" runat="server"></asp:TextBox><br /> <asp:TextBox ID ...

The div's height surpasses that of the image

I'm new to front-end development and have been experimenting with code. Here's an example of what I've been working on: <div style="background-color:red"> <img src='https://www.logaster.com/blog/wp-content/uploads/20 ...

Boundary around an object within a unified picture

I'm facing a bit of difficulty with a task. I need to add a border around an element within an image (I can't insert an image due to low reputation), and this border should match the width and height of the element exactly. It also needs to be re ...

Having an absolute element can lead to overflow causing a scroll

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .wrap { ...