Achieve an overlapping effect between absolutely positioned sibling divs without the need to specify a background color

Exploring the development of a swipe-to-action list component.

<div class="list-container">
    <div class="row">
        <div class="content">
            Sample Content 1
        </div>
        <div class="action">
            Delete Action
        </div>
    </div>
    <div class="row">
        <div class="content">
            Additional Content 2...
        </div>
        <div class="action">
            Delete Action
        </div>
    </div>
</div>

The action div is positioned absolutely with a z-index lower than that of the content div.

The objective is to have the content div overlap the absolutely positioned action div, all without applying a background-color to the content div. When the user swipes the list, the content div will be moved along the X-axis to reveal the action underneath it.

Check out a live example here.

Note that the content in the second row does not have a background color applied, which allows the action to remain visible.

Are there alternative methods to achieve this effect?

cssangulardomcss-position

Answer №1

Updated the stackblitz by initially setting the action class to have display:none. Once animated, the css property display is then set to block.

anim() {
  requestAnimationFrame(() => {
    this.value -= 1;
    if (this.value > -50) {
      this.anim();
      (document.querySelector('.action') as HTMLElement).style.display = 'block'
  }
});

Make sure to include the following css in your file:

.action{
  ...
  display:none;
}

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

It vanishes as soon as you move your cursor away during the animation

I created a button component with text animation, but I'm encountering an issue. When I hover over the button, the animation works smoothly. However, if I quickly move my cursor away or unhover in the middle of the animation, the text disappears unex ...

javascriptcssreactjsnext.jsframer-motion

Modify the text color of all input elements with Tailwind

I have been using this code in multiple sections of the app: <label className="input text-neutral-content"> Name <input type="text" className="grow text-base-content"/> </label> While I understand that ...

csstailwind-cssdaisyui

The customization of jQuery UI Slider is failing to function as expected

In my quest to create a customized jQuery slider, I encountered the need to change the background of the slider handle. After experimenting with some code on this link, I am still unable to achieve the desired effect. Following the documentation, I have a ...

jqueryhtmlcssjquery-uiuislider

Choosing bookmarkable views in Angular 5 without using routes

I'm currently working on a unique Angular 5 application that deviates from the standard use of routes. Instead, we have our own custom menu structure for selecting views. However, we still want to be able to provide bookmarkable URLs that open specifi ...

javascripthtmlangular

Angular version 5 and above introduces a new feature called "openFromComponent" within the Snackbar component, facilitating seamless communication

Angular (v5.2.10) Snackbar --| Introduction |-- I am facing a scenario where an Angular component named "Parent" is initializing an Angular Material Snackbar known as snackBar. The snackbar is being passed in the component called SnackbarMessage, which ...

angulartypescriptangular-componentssnackbar

Ways to match a string against a numeric value

I have a span id with textContent which have their own time(hour/minutes) <div class="here"> <span class="time" >8 min</span> </div> <div class="here"> <span class="time" >22 min&l ...

javascripthtmlcss

Why is the "text-overflow: ellipsis" property of a parent div not functioning properly for its child div?

Why is the CSS property text-overflow: ellipsis not working on a child div with the class name cluster-name? .ft-column { flex-basis: 0; flex-grow: 1; padding: 4px; text-overflow: ellipsis; overflow: hidden; } .ft-column > .cluster-name { ...

htmlcss

Incorporating an external SVG file into an Angular project and enhancing a particular SVG element within the SVG with an Angular Material Tooltip, all from a TypeScript file

Parts of the angular code that are specific |SVG File| <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="950" height="450" viewBox="0 0 1280.000000 1119.000000" preserveAspectRatio= ...

angulartypescriptsvgtooltipexternal

Guide to incorporating a progress bar during the file upload process

While successfully transferring a file to a URL, I'm having trouble monitoring the progress of the upload. I need to track the progress in numbers. fileTransfer.upload(file_path, api_endpoint, options, data) .then((data) => { // succes ...

angularionic2

The dropdown menu in Angular 2/4 isn't displaying the selected item

I am currently working on implementing a dropdown feature in my Angular application. The dropdown consists of a list of shops, and when I select a shop, it should display the corresponding content for that shop. However, I've encountered an issue wher ...

angularangular2-templateangular2-formsangular2-select

PHP library dompdf is having issues when rendering CSS styles

Trying to convert HTML with CSS styles into a PDF using dompdf. The CSS includes floats as well. Below is the snippet of my CSS and HTML code: $dompdf = new DOMPDF(); //create object //load html with css $dompdf->loadHtml('<html> <head ...

phphtmlcssdompdf

Implementing a dependent <select> within an HTML table is a useful feature to enhance user experience and organization of

I have set up a table with editable columns where values can be selected from a drop-down menu. I achieved this by using HTML select. The options in the 'Category tier 2' column are based on the selection made in the 'Category tier 1' c ...

angulartypescripthtml-table

Issue with border rendering on triangles in CSS on IE8

I currently have a horizontal navigation bar with triangle borders inserted using :before and :after for each list item. This creates the illusion of a white bordered point on the right side of each list item. The issue I'm facing is that this design ...

htmlcssborderpseudo-element

Using a combination of CSS selector, several attributes, and the OR operator

Can you assist me with CSS selectors? Let's say we have a style HTML tag: <style type="text/css"> [...selector...] {color:red;} </style> I want to create a selector with multiple attributes and logical operators, but I am uncertain about ...

csscss-selectors

Scroll overflow can be hidden

I'm working on a project with a div containing scrollable content, but I'm struggling to get the header to overflow its parent element. It seems that using overflow: scroll is causing the element to have overflow: hidden as well. Any assistance ...

htmlcssoverflow

Guide on showcasing jQuery variable values in PHP on a single page

I have some JavaScript and PHP code that I need help with. I want to assign a jQuery variable value to a PHP variable called $nicks, and then echo the value of $nicks on the same page. <script type="text/javascript"> var axel = 131.5678466; < ...

phpjqueryhtmlcss

Issue encountered during ng2-redux installation

While attempting to use the https://www.npmjs.com/package/ng2-redux link, I encountered an issue when running npm install redux ng2-redux --save. Here is the stacktrace of the error: npm ERR! Windows_NT 6.1.7601 npm ERR! argv "C:\\Program Files& ...

angularredux

Angular - The argument provided is not compatible with the parameter

I encountered the following TypeScript errors in app.component.ts: Issue: Argument of type '(events: Event[]) => void' is not assignable to parameter of type '(value: Event[]) => void'. Description: Types of parameters 'events& ...

javascriptangulartypescript

Error in Directive: NgControl Provider Not Found

I encountered an issue with my Directive while attempting to inject 'NgControl' and received a 'No provider for NgControl' error. Here is the structure of my File Directory: app folder |--directives folder |--myDirec ...

angulartypescript

Enhance your website with a stylish drop-down menu from inc.com

I am trying to create a drop and hide menu effect similar to the one on Here is my current demo: http://jsfiddle.net/elementhttp/56ThC/ $("#1").mouseover(function(){ //alert("aaaaaaaaaa"); just for testing $(".block2").stop().fadeToggle(700 ...

jqueryhtmlcss