Having difficulty developing a website layout design

Struggling to create a web layout using only HTML and CSS. Seeking assistance with the following code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fddcc356;
}

.container {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img_part {
  width: 40%;
  height: 250px;
  background: url(images/hat.jpg) no-repeat center/cover;
  border-radius: 8px;
  position: relative;
}

.text_part {
  width: 50%;
  min-height: 550px;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  border-radius: 8px;
  color: white;
  margin-left: -20px;
}

.text_part h1 {
  font-size: 40px;
  font-weight: lighter;
}

.text_part p {
  margin: 20px 0;
  line-height: 25px;
  font-weight: 500;
}

.text_part a {
  text-decoration: none;
  color: black;
  padding: 20px 30px;
  letter-spacing: 2px;
  display: inline-block;
  text-transform: uppercase;
  background-color: white;
  position: absolute;
}

.behind_part {
  min-width: 25%;
  min-height: 100px;
  background-color: brown;
  position: absolute;
  border: 2px solid red;
  margin-right: 350px;
  margin-top: -350px;
}
<section>
  <div class="container">
    <div class="img_part"></div>
    <div class="text_part">
      <div class="content">
        <h1>French girl</h1>
        <h1>Summer Outfit</h1>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.
        </p>
        <a href="#" class="btn">Learn More</a>

      </div>
    </div>
    <div class="behind_part"></div>
  </div>
</section>

My Output : https://i.sstatic.net/N8zcG.png

The actual output: https://i.sstatic.net/KiMKm.png

Issue: Struggling to position the brown container behind the image without covering it. Seeking advice on resolving this problem, despite accomplishing it 90%.

Answer №1

The CSS property known as z-index determines the stacking order of elements on a webpage.

When using the z-index property in CSS, you are essentially setting the layering order of positioned elements and their child elements or flex items. Elements with a higher z-index value will appear on top of those with a lower value.

Visit MDN Docs

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fddcc356;
}

.container {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img_part {
  width: 40%;
  height: 250px;
  background: url(https://via.placeholder.com/200) no-repeat center/cover;
  border-radius: 8px;
  position: relative;
}

.text_part {
  width: 50%;
  min-height: 550px;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  border-radius: 8px;
  color: white;
  margin-left: -20px;
}

.text_part h1 {
  font-size: 40px;
  font-weight: lighter;
}

.text_part p {
  margin: 20px 0;
  line-height: 25px;
  font-weight: 500;
}

.text_part a {
  text-decoration: none;
  color: black;
  padding: 20px 30px;
  letter-spacing: 2px;
  display: inline-block;
  text-transform: uppercase;
  background-color: white;
  position: absolute;
}

.behind_part {
  min-width: 25%;
  min-height: 150px;
  background-color: brown;
  position: absolute;
  border: 2px solid red;
  margin-right: 350px;
  margin-top: -350px;
  
  z-index: -999;
}
<section>
  <div class="container">
    <div class="img_part"></div>
    <div class="text_part">
      <div class="content">
        <h1>French girl</h1>
        <h1>Summer Outfit</h1>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.
        </p>
        <a href="#" class="btn">Learn More</a>

      </div>
    </div>
    <div class="behind_part"></div>

  </div>
</section>

By applying z-index: -999; to the image element, it will be pushed to the background.

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

What are some effective techniques for personalizing Bootstrap?

Recently, I have found myself facing numerous challenges with Bootstrap. Although I used it to create a website in the past, I haven't touched it since. However, circumstances have now led me to incorporate it into my current project. I have downloade ...

Ensure that the width does not decrease

Edited: included fiddle and code snippets I am facing an issue with the width of columns in my layout. The width of the columns is dynamically calculated based on the content they hold. However, when I filter the results using a search input for a specifi ...

Ways to apply a box shadow exclusively to specific elements

Is there a way to apply a box-shadow to a div without it affecting specific other divs? In simpler terms, is it possible to prevent shadows from being cast on a particular div? Take for example this scenario: http://jsfiddle.net/Cd6fE/ How can I prevent ...

Encountering an error when attempting to start npm after creating a react app

I've been attempting to create a new React app but I'm having trouble running `npm start`. I don't quite understand the error message, so I'm hoping someone can help. I also tried deploying on GitHub yesterday (if that information is he ...

Using jQuery to alter the properties of CSS classes

Is it possible to modify the properties of a CSS class, rather than the element properties, using jQuery? Here's a practical scenario: I have a div with the class red .red {background: red;} I wish to change the background property of the class re ...

Selecting options from the Gmail dropdown menu

I'm attempting to create a dropdown menu similar to the one in Gmail using Bootstrap. https://i.sstatic.net/K1NCg.png However, I have encountered 2 issues: 1- I am unable to click on the input checkbox to select all 2 - I would like it so that if ...

Improving the style of Google Maps InfoWindows for right-to-left languages

I'm currently working on a Google Maps marker infowindow and trying to adjust the padding specifically for RTL languages. Here's what I've attempted so far: google.maps.event.addListener(marker, 'click', function () { i ...

What is the best way to dynamically set an ID in Angular using the pound symbol (#)?

I am currently developing a dynamic Angular 6 application that utilizes dynamic components. My approach involves using @ViewChild('<id>', { read: ViewContainerRef }) <id>; to reference the divs where I intend to populate with dynamic ...

Accessing iframe's HTML using a server-side solution by circumventing the Cross-Domain Policy

Our current challenge involves accessing dynamically generated HTML elements using JavaScript, particularly when trying to extract image URLs from these elements. When the HTML elements are generated solely through JavaScript, extracting the URL is straigh ...

What is the best way to format a string to display the second value in the string?

I have successfully combined the currency and value columns into one column displaying USD 20000. Now I am looking to format the value string to appear as USD 20,000. However, I am unsure of how to incorporate property.DisplayFormatString into the second s ...

Angular Components unexpectedly lose background transparency when using Transparent-Background-PNG in the foreground

Hey there! I'm currently working on a landing page and I have this amazing idea to use a stunning picture of clouds with a transparent background layered over a beautiful landscape. The only problem is that when I try to implement it, the transparency ...

Ensuring Your IMG is Perfectly Centered in DIV Across all Browsers

I have tried all the tips from the top Google results, but I am still struggling to center an image within a div. For example, the popular tricks mentioned in this link: or http://www.w3.org/Style/Examples/007/center.en.html do not seem to work in IE 8. ...

What is the best way to include multiple selected option values from select2 in form.serialize()?

I am trying to use select2 for selecting multiple options in HTML and then send the selected values as an array using form.serialize() to update a database field. However, my form also contains other input fields. How can I achieve this? Here is my HTML c ...

CSS and JavaScript dropdown malfunctioning due to a position swap in internal CSS

This example demonstrates functionality .c1 { background-color:red; position:relative; } .c2 { background-color:blue; position:absolute; height:50px; width:100px; display:none;} .show { display:block; } <body> <button ...

How to position a textarea alongside a checkbox using CSS with Bootstrap

I'm having an issue aligning a text area next to a checkbox in my Bootstrap HTML. Here's the code snippet: <div class="form-group row"> <div class="col-12 form-check"> <label class="col-3 col-form-label" for="check15"& ...

Encountering a red squiggly line while working on an Angular 2 project in an HTML file within Visual Studio

Whenever I incorporate Angular 2 code into my HTML files, I notice red squiggly lines appearing like this: https://i.sstatic.net/fhXGu.png Hovering over the red squiggly lines does not reveal any errors or warnings. It may be worth mentioning that I am ...

Persistent vertical menu dropdown that remains expanded on sub menu pages

I am struggling to understand how to keep my menu sub items open when on the active page. Although I have tried similar solutions, I have not been successful in implementing them. I apologize if this question has been asked before. My approach involves usi ...

Is OpenLayers + Ajax causing issues or errors?

Utilizing the code provided below to showcase an OpenLayers map within a DIV container presents a peculiar issue. Upon initial load of the webpage, the map does not display consistently - requiring multiple page refreshes in order for it to become visible. ...

Component template using Knockout.js and RequireJS for HTML widgets

Trying to implement the widget example for knockout from here. Unfortunately, I am having issues loading the template from an external HTML file using requirejs. ko.components.register('like-or-dislike', { template: { require: &apos ...

Unable to set the correct title view for mobile devices

We have successfully styled the products for desktop view and larger phones, but we are facing challenges in adjusting them properly for smaller phones. Below you will find a photo and corresponding code snippets: /* Products list - view list */ .product ...