Stacking elements using the relative position property

One challenge I am currently facing involves stacking divs designed to resemble sticky notes in such a way that the bottom part of each div extends out. To achieve this, my initial thought was to style the topmost div conventionally and only apply styling to the visible parts using the bottom divs. My dilemma arises when considering the consistent application of border-radius to all divs. If I choose not to stack them equally in terms of width and height, any border-radius modification on the top div will not match those applied to the lower divs due to varying dimensions.

<div class="stickynote1"> content <div>
<div class="stickynote2"> content <div>
<div class="stickynote3"> content <div>
  1. Is there a solution to rectify the border-radius inconsistency without mandating uniform dimensions for all divs?
  2. If I decide to standardize the width and height of all divs, how can I successfully stack them? The combination of position:relative and z-index on the divs seems ineffective as position:relative establishes a new container block, hindering z-index compatibility with other new container blocks of the divs.
htmlcss

Answer №1

My suggestion for this situation would be:

  1. Create a new class called "stickynote" and identify all the common styles, like border-radius. Apply this class to all elements with those styles.

  2. It appears that you are having trouble stacking the elements on the z-axis. Instead of stacking them vertically along the y-axis, consider placing all three elements in a container. Make the container position:relative and each sticky note position:absolute. Give each one a different z-index while keeping their x/y positions the same.

Answer №2

Here are some tips to enhance scalability:

  1. Utilize a shared class.
  2. Make sure to properly close the </div>.
  3. Verify the code snippet.

Snippet

.stickynote {
  position: absolute;
  background: #0f0;
  border: 1px solid #f90;
  border-radius: 5px;
  padding: 10px;
  width: 75px;
  top: 10px;
  left: 10px;
}
.stickynote + .stickynote {
  top: 20px;
  left: 20px;
}

.stickynote + .stickynote + .stickynote {
  top: 30px;
  left: 30px;
}
<div class="stickynote"> content </div>
<div class="stickynote"> content </div>
<div class="stickynote"> content </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

Difficulty maintaining consistent line widths while setting up a CSS border grid on a table

What is the most effective method for creating a table with a 1px grid (internal and external)? Could it be possible that Chrome and Edge have issues with borders in certain scenarios? On this Codeply example, the standard approach is taken - setting bord ...

htmlcsshtml-table

Issue with PHP Form data not syncing with MySQL Database

I have been attempting to create a form and upload it into my database, but unfortunately, it is not functioning properly. Here is the HTML code I am using: <form name="Form-Request" method="post" action ="icn/form.php"> <div> ...

phphtmlmysqlinsert

Original state of class name is restored upon change

I'm currently working on creating a Lightbox-style effect using CSS and Javascript. The idea is to change the classname of an element (OverlayContainer) to toggle between a normal background and a darker overlay. However, I've run into an issue w ...

javascriptcsshtml

Unable to access content in the mail body of Outlook webmail via mailto

I have successfully created a mailto URL for Outlook (web version), but now I am facing challenges with implementing it on the web version OWA. Here is the URL that I am struggling with: <a href='https://company.domain.com/owa/?ae=Item&a=New& ...

htmlemailurlmailtooutlook-web-app

Menu using JQuery and CSS does not overlap a fixed div on an iPad device

I've been working on a website with a fixed top div featuring a basic dropdown menu and a fixed left div below it. The issue I'm facing is that when viewing the site on an iPad, the submenu items appear under the fixed left div instead of where t ...

jqueryhtmlcssipad

What is the significance of using flexGrow in the parent div of a Material UI grid?

I am currently working on understanding a code example located at https://codesandbox.io/s/9rvlm which originates from the Material UI documentation (https://material-ui.com/components/grid/): import React from 'react'; import PropTypes from &ap ...

cssreactjsflexboxmaterial-ui

Transitioning from one CSS id to another during page loading

Wondering how to fade in one CSS id on page load and then smoothly transition to another after a few seconds? Here are the ids: #background { background: url("images/am_photography_bg.jpg") no-repeat center -25px fixed; background-size: 100%; ...

javascriptjqueryhtmlcss

Issues with margin and padding-top not functioning properly when using @media for printing

Is there a way to add some space between the top of my webpage and my logo? I've tried adjusting the padding in my CSS, but when I check the print preview in Chrome, no spacing is visible. Below is my HTML code: <div class="container"> < ...

htmlcssmarginpaddingspacing

How to Combine Various Conditions in a ngStyle Directive?

I am working with a NgStyle Tag and would like to incorporate multiple conditions, but I am encountering issues where it doesn't work or produces errors. Here is the code snippet that I have been experimenting with: <div class = "card" [ngStyle] ...

cssangular

Obtain the string contents of a table from an HTML page without the necessity of downloading a physical file

After completing a transaction, I am dynamically generating important information on an HTML page. <html> <head> <script type="text/javascript> function downloadReference(){ } </script> </head> <body> < ...

javascripthtml

Unique events catered to specific devices: mobile vs. desktop

When a user clicks on the login icon from a desktop, I want a modal dialog to appear. However, when using smaller devices like mobile or tablets, I prefer that a reactjs route is triggered to display in the main content area instead of using a modal dialog ...

javascripthtmlcssreactjsresponsive-design

The phenomenon of bootstrap tooltips resizing the screen upon hover activation

Trying to incorporate a tooltip on an element of my website, I have "data-toggle="tooltip" data-html="true" title="This is my tooltip text" The issue arises when I hover over the element, as the tooltip first flashes at the bottom of the page. This cause ...

htmlbootstrap-4tooltip

PHP-generated image of a security code

I am utilizing sessions to generate an image through a seccode.php file, with the image source set as 'seccode.php' on my sign-in page. While this method typically works fine, occasionally users attempting to use the sign-in page multiple times m ...

phphtmlsession

Is there a way to apply border-radius to the header of a table in Bootstrap 5?

My use of Bootstrap 5 for styling a table has encountered an issue. Even with the border-radius set on the table-dark class, the thead element's border does not change. I am looking for a way to address this problem. Any suggestions? .table-dark { ...

htmlcss

Tips on executing an ajax script when the page is reloaded

Is there a way to trigger the ajax script upon refreshing the page? I've encountered an issue where the ajax script fails to run as intended. Below is the script in question: $(window).bind("load", function() { var data = {}; data.emai ...

javascriptjqueryajaxhtml

Annoying underlines from JavaScript active links - no thanks!

Today I am facing a problem. I want to create a script that will emphasize the active link that I clicked on. I'm not sure how to do this. Can you provide me with some advice? I have an idea, but I'm not certain if it's the best solution. ...

javascriptjqueryhtmlcss

The :before and :after pseudo classes are not displaying properly on the video element

I'm trying to display a title over a video element while it's playing, but I've run into an issue. When using the <video> tag, it doesn't work as expected, however, when I switch it to a <div>, everything works perfectly fin ...

htmlcssvideo

Showcasing certain elements as the user scrolls

Looking for a way to display an element (such as a div) when the user scrolls without using JQuery? Here's an example that tries to achieve this: var scroll = document.body.scrollTop; var divLis = document.querySelectorAll("div"); for(let i = 0; i ...

javascripthtmlcss

How can I retrieve information from an HTML or JavaScript object?

Imagine a scenario where you have an HTML table consisting of 5,000 rows and 50 columns, all generated from a JavaScript object. Now, suppose you want to send 50 checked rows (checkbox) from the client to the server using HTTP in JSON format. The question ...

javascriptjqueryhtmljsonhttp

How do I easily show/hide a submenu in AngularJS with a toggle menu?

After browsing some Stacks, I've come to the realization that I need to create separate directives in order to hide or toggle a menu from its sub-menu items. I want the menu to be hidden when any of the sub-menu items are clicked. However, I can&apo ...

htmlcssangularjshamburger-menu