Can the <container> block be positioned beneath the <header> block?

header {
  background: blue;
  color: white;
  width: 100%;
}

.container {
  background: green;
  text-align: center;
  width: 100%;
  height: 100px;
  transform: skew(0, -10deg);
  color: white;
  position: relative;
  top: 55px;
}

.container .home{
  position:absolute;
  bottom:0;
}
<header class="header">
  <div class="logo">
    <i class="fab fa-accusoft"></i>
    <span class="title">DreamCoding</span>
  </div>

  <section class="container">
    <div class="home">
      <div class="title">Alphabet</div>
      <div class="text">
        abcdefg
      </div>
    </div>
  </section>

I am facing a situation where I have the header box and the container box. My challenge is to make sure that the container box is covered by the header box. However, I keep encountering an issue where the container box gets covered by the header box repeatedly.

English is not my first language, so I hope I made myself clear. Regardless, thank you in advance for your help.

htmlcss

Answer №1

To ensure proper layering of the elements, it is important to include the z-index property in both elements. Below is a runnable code snippet demonstrating this:

header {
  background: blue;
  color: white;
  width: 100%;
  z-index: 1;
}

.container {
  background: green;
  text-align: center;
  width: 100%;
  height: 100px;
  transform: skew(0, -10deg);
  color: white;
  position: relative;
  top: 55px;
  z-index: -1;
}

.container .home {
  position: absolute;
  bottom: 0;
}
<html>

<body>
  <header class="header">
    <div class="logo">
      <i class="fab fa-accusoft"></i>
      <span class="title">DreamCoding</span>
    </div>

    <section class="container">
      <div class="home">
        <div class="title">Alphabet</div>
        <div class="text">
          abcdefg
        </div>
      </div>
    </section>
  </header>
</body>

</html>

**The purpose of using the z-index property is to control the stacking order of elements on a webpage.

Answer №2

You have the ability to define a background in the :before selector by using position:absolute and z-index:-1

body{
  margin: 0;
}
header {
  background: blue;
  color: white;
  width: 100%;
}

.container {  
  text-align: center;
  width: 100%;
  height: 100px;  
  color: white;
  position: relative;
  top: 55px;
}

.container:before {
  content:"";
  transform: skew(0, -10deg);
  background: green;
  width: 100%;
  height: 100%;
  position:absolute;
  top:-25px;
  left: 0;
  z-index: -1;
}

.container .home{
  position:absolute;
  bottom:0;
}
<header class="header">
  <div class="logo">
    <i class="fab fa-accusoft"></i>
    <span class="title">DreamCoding</span>
  </div>
  <section class="container">
    <div class="home">
      <div class="title">Alphabet</div>
      <div class="text">
        abcdefg
      </div>
    </div>
  </section>
</header>

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

I am attempting to integrate a datetimepicker onto my website, but I keep encountering an error. Can

Once upon a time, my website had a perfectly functioning datetimepicker. However, one day it suddenly stopped working. After some investigation, I realized that the JavaScript file I was referencing had been taken down. Determined to fix the issue, I visit ...

javascriptjqueryhtml

The CSS code does not seem to be rendering properly within the plugin when attempting to generate a PDF file

I attempted to use a rendering plugin in order to create a PDF file. However, when I tried to add a CSS file for my template, it did not work as expected. I am a bit confused about how to properly import a CSS file into my GSP page. Here is the template c ...

htmlmavengrailsrenderinggsp

Having trouble choosing an item from the Select2 drop-down menu

I have been developing an application that incorporates Select2 (version 3.5.1). The HTML used to create the dropdown / autocomplete field is as follows: <input id="mySelect" class="form-control" type="hidden"> The snippet above includes the form-c ...

javascripthtmljquery-select2

Is it possible for me to customize the CSS of the masterpage for a specific aspx file?

Recently, I completed a website that was almost ready to be published. However, my client now wants to add a new page with similar content as the main masterpage (including the logo, menu, and a few buttons), but with some changes in colors and background ...

htmlcssvb.net

Unlock the power of jQuery to apply CSS transition effects and animations with precision

A web application utilized Bootstrap, featuring a toggle navigation for the sidebar drawer/navigation that was supposed to be animated by default. However, there appeared to be no animation happening. To address this issue, the following CSS code was imple ...

jquerycsstwitter-bootstrap

Easy-to-use form input ensuring a constant total of 100

Looking for a way to collect numerical values from users that total 100% on a dynamically generated form? I'm exploring the idea of using a script or algorithm to adjust text fields as values are changed, ensuring they always add up to 100%. However, ...

htmljquerywidget

Transitioning from LESS to SASS involves adapting responsive breakpoints

Adapting from Less to Sass has been my current focus. I have defined responsive breakpoints in Less variables: /* Breakpoints */ @break1:~"(max-width: 570px)"; @break2:~"(min-width: 571px) and (max-width: 1002px)"; @break3:~"(min-width: 1003px)"; These ...

cssresponsive-designsasslessmixins

Steps for adding an overlaying image in HTML and SCSS

First step: background-size: cover; Second step: background-size: contain; background-repeat: no-repeat; The third step is what I need: the first background image to be set as cover and the second one as an overlay with no-repeat Currently, my HTML incl ...

htmlcsssass

Struggling to locate tab link elements with Selenium using different approaches

I am encountering difficulties with Selenium in locating a specific set of tab link elements by their IDs or link text. During my usage of Selenium, I am attempting to click through each of the tabs ("DESCRIPTION AND PRICE", "FINISH", and "NOTES") and extr ...

pythonhtmlseleniumbeautifulsoup

Styling Overflow in Coda Slider using CSS

Currently utilizing the Coda Slider for my project. For those unfamiliar with the Coda Slider, it initially hides the overflow-x position until a tab is clicked. This triggers an animation that slides the hidden DIV in either from the right or left side. ...

jquerycsscoda-slider

Is there a way to access the badge hidden behind the collapsible menu in bootstrap 4?

After moving from bootstrap 3 to bootstrap 4, my items no longer align properly. I've scoured the entire Internet for a solution, but I've run out of options (and patience.. haha) This is how it currently looks: https://i.sstatic.net/ra22j.png ...

csstypescriptreact-reduxbootstrap-4

Concealing content to prevent it from being accessed through HTML and JavaScript inspection techniques

I created a website with a simple guessing game where users can win if they enter the right code. My approach involves using JavaScript: <script> function z() { var b = document.getElementById('idea'); var a = document.g ...

javascripthtml

What methods can I use to ensure my HTML/CSS code is compatible with all browsers? It functions properly on Chrome but encounters issues on Safari, Edge, and other

My hosting for the website is with bluehost, and interestingly when viewed on Chrome, everything appears perfect. However, upon switching to Safari, I noticed that the background of the about me section is not black as intended, and the footer seems to be ...

htmlcss

Applying custom styles to the initial 5 elements post clicking the button with Jquery

I have a set of HTML codes containing multiple buttons. <div class="main"> <div class="button hide">1</div> <div class="button hide">2</div> <div class="button hide">3</div> <div class="button h ...

javascriptjqueryhtml

Is it possible for JavaScript to only work within the <script> tags and not in a separate .js

I'm facing a puzzling issue with my JavaScript code. It runs fine when placed directly within <script>...code...</script> tags, but refuses to work when linked from an external file like this: <SCRIPT SRC="http://website.com/download/o ...

javascriptjqueryhtml

Display or conceal div based on chosen options

I am working on a feature that involves three dropdown select boxes, each containing different sets of demographic attributes. My goal is to show a score based on the combination of selections made by the user. For example, if a user chooses Male, 18-24, A ...

javascriptjqueryhtml

Basic node.js server that responds with HTML and CSS

I have successfully created a basic http server to send an HTML file as a response. However, I'm struggling with how to also send a CSS file so that the client can view the HTML page styled with CSS in their browser. Here is my current code: var htt ...

javascripthtmlcssnode.js

Change the parent title attribute back to its original state

This is in contrast to queries similar to the one referenced here. In my scenario, there is a child element within a parent element (specifically a matSelect within a matCard, although that detail may not be significant) where the parent element has a set ...

htmlangulartypescriptproperty-binding

Switch the Follow/Following button depending on the user's current follow status with the individual

I am currently working on a functionality to toggle between the Follow and Following buttons based on whether the current user is following another individual. I have implemented an NgIF statement in my code, but I am facing challenges in properly checking ...

htmlangularjstypescriptparse-platformionic2

Attempting to store form data in a database using PHP has proven to be unsuccessful in my efforts

I am facing an issue while trying to add HTML form data into the database using PHP. Unfortunately, I am unable to successfully insert the HTML form data into the database and I'm not sure what mistake I might be making in my code. Below is the code ...

phphtmlmysqlmysqliforms