I'm seeking assistance in developing the view shown below. I am familiar with using position absolute, but I'm wondering if there is a way to achieve this without relying on absolute values.
I'm seeking assistance in developing the view shown below. I am familiar with using position absolute, but I'm wondering if there is a way to achieve this without relying on absolute values.
.circles {
display: flex;
}
.circles>.left {
height: 2.3rem;
width: 2.4rem;
border-radius: 50%;
margin-right: -0.9rem;
border: 4px solid white;
background-color: red;
}
.center_circle {
z-index: 99999;
}
.left_circle2 {
z-index: 9999;
}
.right_circle2 {
z-index: 99;
}<div class="circles">
<div class="left"></div>
<div class="left left_circle2"></div>
<div class="left center_circle"></div>
<div class="left right_circle2"></div>
<div class="left"></div>
</div>Maybe something along these lines? Introducing a display: flex to keep them aligned in a row, and utilizing a negative margin to position them on top of each other.
.circles {
display: flex;
}
.circles > .circle {
height: 2.3rem;
width: 2.4rem;
border-radius: 50%;
margin-right: -0.9rem;
border: 4px solid white;
background-color: red;
}<div class="circles">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>Check out this code snippet with a live demonstration
.first {
z-index: 1;
border: 2px solid blue;
position: relative;
}
.second {
z-index: 2;
left: -60px;
position: relative;
top: 10px;
border: 2px solid red;
}
.third {
z-index: 1;
left: -100px;
position: relative;
border: 2px solid green;
}<div>
<img src="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-fr.svg" class="first">
<img src="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-fr.svg" class="second">
<img src="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-fr.svg" class="third">
</div>I am working with a parent element that contains some child elements. I create a DocumentFragment and clone certain nodes, adding them to the fragment. Then, I attempt to insert the fragment into the DOM using the insertAdjacentHTML method. Here is an ex ...
I need my form to simultaneously open a window and send the form data via email when submitted. <form action="" method="post" id="form" onsubmit="paymentfunc();return false;"> Submit button: <input type="submit" value="Purchase" class="btn" id= ...
I am looking to activate a button's class by clicking on another button. The button I have is: <button class="clear-cart banner-btn">clear cart</button> This button is used for clearing a cart. On the order confirmation page, I click on ...
const customPanelStyle = { 'background-color': 'red', 'border': '1px solid green', ':hover'{ 'background': 'blue' } } class some extends React.Component{ rende ...
While playing around with text scrolling over a fixed background image (similar to parallax scrolling but with no movement in the background), I encountered an issue. There seems to be a small margin or padding (around 5-10px) between the bottom of the upp ...
I'm really struggling with this issue. I've tried a few different things but nothing seems to work. Any suggestions on how to tackle this problem? Here's a link to a screenshot of the error I'm encountering... <div class="contain ...
Currently, I am utilizing nativescript-vue and I require the colSpan and rowSpan tags to remain unchanged. The code formatter in Vetur changes rowSpan="2" to rowspan="2". Is there a way to deactivate the automatic lowercasing feature o ...
I am facing some unusual behaviors while using Bootstrap in my current project. It seems to be the first time I have encountered such issues. Below is the HTML code snippet: <div class="row" style="background-color: blue; padding: 2rem; ...
Currently, I am using PyQt4 version 4.11 with Python 2.7. My goal is to embed an HTML page in a PyQt GUI using QWebView. The HTML content is generated from Plotly offline and simply consists of a bar chart graph similar to this: bar chart self.webView = ...
Basically, the issue is that the url for an image in jquery-ui.css file does not resolve once the site is deployed. The website is deployed under the default web site in IIS7, causing the browser console to look for the image in a different location than e ...
My latest project involved creating a login page using a bootstrap grid. I designated the image to span col-lg-8 and the form col-lg-4. However, I encountered an issue when resizing the screen for smaller devices. Despite applying img-fluid to the image, i ...
Creating HTML emails can be quite the challenge, especially when trying to make them compatible with Outlook. Is there a method to inspect elements in Outlook similar to how we do on a browser's console? ...
I am having trouble getting the menu bar and logo to stick at the top of my header section in the template. I have been trying different solutions, including using the sticky.js plugin for almost 4 days now but it's not working. I also have parallax e ...
There's a simple example I have where my goal is to modify the color of an iron-icon when it's tapped. To achieve this, I'm utilizing iron-selector for tapping: <template> <style> :host { display: block; padding: 10 ...
My setup includes a p:selectOneRadio constructed like this: <p:selectOneRadio id="positionRadio" value="#{employeeBean.empPosition}" converter="#{empPositionConverter}" layout="custom" required="true" requiredMessage="Please select ...
<div class="class-one"> <div class="class-two"> lorem ipsum <div class="class-three"> <a href="https://yahoo.com" target="" class="btn btn--primary btn--purple " id="" title="find"><i class="fal fa-fw fa-file-word"></i>& ...
I have a JavaScript function that opens a new window to display an image specified in the data variable. I want the new window to close when the user clicks anywhere on it. I've tried inserting some JavaScript code within window.write() but it doesn&a ...
I have 3 tabs with 3 different ids. $(document).ready(function() { $(function() { $( "#tabs" ).tabs(); }); $("#links > a").click(function() { var link = $(this).attr('href').substr(-1,1); console.log(link); $('#t ...
I have developed a unique Invoice System that allows users to customize the number of headings and fields using FPDF in conjunction with PHP. Subsequently, I can input the heading names and field values into HTML input fields. However, I am encountering a ...
I am trying to create a layout where the div color matches the size of an image behind it, with the image moving slightly on hover. Here is my code: <div class="row text-center about__gallery"> <div class="col-xs-12 col-sm-4"> <div cl ...