How can I achieve an overlapped design similar to the image below using CSS and HTML?
How can I achieve an overlapped design similar to the image below using CSS and HTML?
To adjust the position of the second div, you can apply position: relative; and then use top: -30px; (or any other value as needed).
.div-1 {
background-color: orange;
padding: 10px 20px 30px;
text-align: center;
}
.div-2 {
background-color: lightblue;
margin: 0 auto;
padding: 20px;
position: relative;
text-align: center;
top: -30px;
width: 90%;
}<div class="div-1">Div 1</div>
<div class="div-2">Div 2</div>One way to achieve the desired layout is by using negative margins.
body {
display: flex;
margin: 0;
width: 100vw;
flex-direction: column;
}
.div-1,
.div-2 {
text-align: center;
}
.div-1 {
height: 125px;
background: blue;
}
.div-2 {
background: red;
width: 80%;
margin: auto;
margin-top: -50px;
}<body>
<div class="div-1">
<h1> Div 1</h1>
</div>
<div class="div-2">
<h1> Div 2</h1>
</div>
</body>If you want to achieve this effect, one way is to position the elements absolutely relative to their parent.
<!DOCTYPE html>
<html>
<head>
<style>
.parent{
position:relative;
}
.child1{
position:absolute;
top:0;
height:100px;
background:red;
width:100%;
}
.child2{
position:absolute;
top:40px;
left:5%;
height:100px;
background:blue;
width:90%;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">
div1
</div>
<div class="child2">
div2
</div>
</body>
</html>
When it comes to this style of alignment, there is no need for specific positioning properties.
.box1{
background-color: red;
width: 300px;
margin: 0px auto;
height: 60px;
color: white;
text-align:center;
}
.box2{
background-color: blue;
width: 200px;
margin: 0px auto;
height: 60px;
color: white;
margin-top: -50px;
text-align:center;
}<div class="box1">
<p>box1</p>
</div>
<div class="box2">
<p>overlap box</p>
</div>Is there a way to prevent line breaks before words that are going to break anyway when using word-wrap: break-word;? It seems unnecessary and unattractive. Any suggestions? For Example: Consider a div with word-wrap: break-word;, set at a width equal to ...
I'm currently working on a project that involves designing a web form incorporating 3 select boxes with multiple questions. The concept is such that, if I choose the 1st Question from the 1st select drop-down, it should not be available in the 2nd sel ...
I would appreciate it if you could walk me through the implementation of this overlay code... .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ...
I received this code snippet from a WordPress site. <head profile="http://gmpg.org/xfn/11"> Can someone explain what this code does? What is the purpose of including this code? :-) ...
I'm having trouble linking my external CSS to my HTML file. In the head of my index.html, I have this code: <head> <title>Twenty by HTML5 UP</title> <meta charset="utf-8" /> <meta name="viewport ...
I am currently working with an HTML page that includes front end PHP for server side scripting. One issue I have encountered is the configuration page, which can be accessed by disabling JavaScript in Mozilla settings. My current validation method relies ...
I have implemented a select box where selecting a value in the main select box "Domains" will reveal another select box called "Types" such as Diatoms or Flagellates. I have successfully achieved this functionality, but now I am facing an issue with resett ...
Currently working on a project using A-FRAME, I am in the process of creating a menu for hololens. However, I am facing some challenges with a color picker. I have developed a color picker (link: Color picker) and my goal is to select a color and have it d ...
I am in the process of creating a static but responsive storytelling website using HTML. My objective is to create an effect similar to this: https://i.stack.imgur.com/zIEpU.gif The idea is to have text on the left and a *.jpg image fixed on the right. As ...
Currently, I am utilizing AJAX to load and parse XML data. I have constructed a table where I am inserting the data from the XML using a loop. The issue lies in the fact that only around 3000 rows are being inserted into the table even though the XML conta ...
The documentation for Material Design Lite only shows examples of horizontal radio buttons, which may not be sufficient if you need to create a mobile-friendly version with longer label text. If you're looking for a solution, here's a link to a ...
I've been searching extensively for a solution to this issue. I'm trying to make the menu item DE appear bold when entering the site, and if I click on EN, I want DE to return to normal (thin) font while EN becomes bold. You can find the site he ...
Is there a way to modify the color of the arrow when hovering over it with a mouse? I have included the code snippet I used in an attempt to accomplish this. Can you spot where I may be making a mistake (By the way, the 55.5% percentage is intentional)? . ...
Once the page is loaded, it retrieves data on countries from my rest api. When a user selects a country, it then loads the corresponding cities for that country. Everything is functioning properly up to this point, however, upon opening the page, the city ...
I am currently working on an HTML website and struggling with aligning elements properly. At the moment, my page layout resembles this image here, but what I really want is for it to look like this one here. My goal is to set up a 2 by 2 grid, and I' ...
Is there a way to hide the header image on for mobile devices only? I thought I had the right CSS code in place, as when I check the site on a virtual small screen, the image is hidden. @media (max-width: 768px) { .header-image { display:none ...
I am struggling to align items on mobile resolution in a specific order: Image Content Image2 Content2 I have created a pen showcasing this issue on Codepen. Initially, I attempted using transform: translate, but it only worked for the content. The ...
My current project involves utilizing the Video.js Source Code to update the video player on my website that currently uses Boonex Dolphin. I am looking to transition from the flash player used by Dolphin to HTML5. Dolphin's modules contain specific f ...
I'm working on a website that features a gallery. The code below should ideally display two columns of photos when viewed on a medium device width (768px up to 992px). However, only one column is showing up on the screen. I'm hesitant to group th ...
Attempting to create a div while maintaining a 16:9 aspect ratio using CSS led me to conduct a Google search. Fortunately, I stumbled upon a helpful resource on Stack Overflow that detailed how to achieve this: How to maintain the aspect ratio. Excited to ...