Is there a way to position a div on top of the header with flexbox?

I am a beginner in the world of coding and I am currently experimenting with flexbox to create the layout for my website. However, I am facing a challenge where I need to overlay some text and an image on top of the pink rectangular section that is part of the header. Since I am using flexbox, I cannot use position: absolute to achieve this effect. Can anyone suggest alternative methods to make this happen?

This is how it currently looks:

Hey there

I'm Ana and I will help you with any design solution you might be looking for. I'll build the identity or your new, creative and exciting projects and restore new ones that may already exist.
htmlcssflexbox

Answer №1

Here is a simple guide to get you started:

body {
  padding: 0;
}

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

.background-rectangule {
  width: 100%;
  height: 350px;
  background-color: rgba(234, 203, 193, 0.4);
  position: absolute;
}

.test {padding: 15px}

/* ------- nav --------- */

.nav-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  justify-content: flex-end;
}

nav {
  background: white;
  height: 100px;
  flex-direction: row;
  justify-content: space-between;
}

nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  padding: 5px;
}

nav li {
  position: relative;
  margin-left: 45px;
  font-family: "Inter", sans-serif;
}

li {
  display: list-item;
}

nav a {
  color: #8e7199;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}


/* ------- Containers --------- */

.containers {
  width: 200px;
  margin: 10px;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.welcome-section {
  width: 400px;
}

.welcome-section h1 {
  font-family: "Playfair Display", serif;
}

.intro-text {
  font-family: "Amiri", serif;
}
<header>
  <nav>
    <div class="background-rectangule"></div>
    <div class="test">Insert your text here</div>
    <div class="nav-container">
      <ul>
        <li><a class="transition" href="link">home</a></li>
        <li><a class="transition" href="./about.html">about</a></li>
        <li><a class="transition" href="link">work</a></li>
        <li><a class="transition" href="./contact.html">contact</a></li>
        <li><a class="transition" href="./shop.html">shop</a></li>
      </ul>
    </div>
  </nav>
</header>
<main>
  <div class="wrapper">
    <div class="containers section-1">
      <img src="IMG_0034.JPG" max-width="700" height="380" />
    </div>
    <div class="containers welcome-section">
      <h1>Hey there</h1>
      <div class="intro-text">
        I’m Ana and I will assist you in finding the perfect design solutions for your needs. Whether it's creating identity for new projects or enhancing existing ones, I've got you covered.
      </div>
    </div>
  </div>
</main>

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

Strategies for successfully passing and showcasing the result of a calculation on a fresh view or component within Angular

I have developed a basic calculator application with two main components: Calculator and Result. The Angular router is used to navigate between these components. Now, I am looking for a way to dynamically display the calculation result from the Calculator ...

htmlcssangulartypescriptangular-template

How can I attach :after and :before pseudo-elements to a submit button?

I'm attempting to enhance my submit button with :after/:before elements, but I'm having trouble getting it to work properly. Specifically, I want to add a swipe (Sweep To Right) transition effect on the button from left to right. Similar to - th ...

htmlcss

When scrolling back to the top of the page, the data-spy feature does not re-highlight the "Home" anchor

After experimenting with Data-spy to change the active anchor while scrolling, I encountered an issue. Upon scrolling back up to the top of the page from the about section, the "Home" anchor failed to re-activate. How can this be fixed? I attempted to rem ...

javascripthtmlcsstwitter-bootstrapscroll

Choose a specific cell in the table and store it in the session

I am new to working with PHP and have never dealt with sessions before. My current goal is to randomly select a table cell and save its location (x,y coordinates) in a new session. Below is the code I have so far, but I am unsure of what steps to take ne ...

phphtml

Do individual JavaScript script tags operate independently of one another in terms of error handling?

My main goal is to establish a connection to my server using websockets and send messages to the browser for remote page reloads. I want to ensure that this code runs independently of any other errors on the page, allowing me to remotely refresh the page i ...

javascripthtmlruntime-error

Include a return or delete from the default IO statement

I am utilizing an intersection observer that alters the header's font-color and background-color based on the content intersecting with it. This change is determined by the presence of data-color and data-background attributes declared on the div/sect ...

javascripthtmlcssintersection-observer

Can we access an element within the document using its context?

One common method to access an element is by using its id: <div id="myId"></div> <script type="text/javascript"> $(document).ready(function(){ $('#myId').something(); }); </script> However, there are inst ...

javascriptjqueryhtml

Troubleshooting a JavaScript error: Script.js throwing 'Uncaught TypeError' at line 5

While working on a small project, I encountered a JavaScript error that reads: script.js:5 Uncaught TypeError: Cannot set properties of null (setting 'onkeyup') at script.js:5:18 Below is the HTML & JavaScript code snippet that triggered thi ...

javascripthtmlcss

Modifying two distinct charts according to the choices made in two independent dropdown menus

In my current project, I am facing a challenge with integrating two separate dropdowns containing UFC fighter names. The goal is to display a plot showing the KD (Knockdown) data for the selected fighters over time when their names are chosen from both dro ...

javascripthtmldrop-down-menudropdown

Interacting with dynamically loaded HTML content within a div is restricted

On my main HTML page, I have implemented a functionality that allows loading other HTML pages into a specific div using jQuery. The code snippet looks like this: $('.controlPanelTab').click(function() { $(this).addClass('active').s ...

javascriptjqueryhtmllazy-loading

What are effective ways to eliminate script tags from a webpage?

I have implemented tags on my website that users can use to interact with the site. My goal is to figure out how to make the browser only read text from a specific file I write, without any HTML. This should be restricted to certain sections of my websit ...

asp.netjavascripthtmlcss

Manage Raspberry Pi through a local website

Seeking guidance on creating a system where pressing a button on a webpage triggers a signal to a raspberry pi. For example, clicking on button1 on my laravel-built website initiates operation1 on the raspberry pi side, which will be using a .Net App. An ...

html.nettcpraspberry-pi

Can you explain the concept of ".el" as it relates to JavaScript, HTML, and jQuery?

After conducting a search on Google, I didn't find much information. Perhaps I am using the wrong terms. I am trying to figure out what the "el" in "$.el" represents in the following code snippet: $.el.table( $.el.tr( $.el.th('first name ...

javascriptjqueryhtml

I keep receiving an error message that says "The MIME type 'application/json' is not executable." Can anyone explain why this is happening?

Encountering an issue because the MIME type of this file ('application/json') is non-executable and strict MIME type checking is turned on. I am working on incorporating a map into a website and have obtained a JSON file containing coordinates. ...

htmljson

How can the target pseudo-class be utilized to replace the 'active' state on navigation across several pages effectively?

Within a large application, I am managing a micro site and looking to implement tertiary navigation with an active state for pages. This involves inserting a single html blob into multiple pages. My goal is to use an active class to highlight the page in ...

htmlcss

Type within a customizable div element located within an iframe

When I switched to using iframe driver.switchTo().frame(driver.findElement(By.xpath("//iframe[@id='ContentFrame']"))); I attempted two different methods, but neither of them worked. Approach 1: WebElement webElement = driver.findElement(locat ...

javahtmliframeselenium-webdriver

Switch effortlessly between one animation and another with Angular.js

I have two animations named "prev" and "next". Upon clicking the prev button, the "prev" animation should play. Similarly, when you click on the "next" button, the "next" animation should be triggered. I am using ng-class to achieve this behavior. How can ...

javascriptcssangularjs

Leveraging Masonry.js with dynamically created divs using jQuery

Recently, I discovered Masonry.js and was excited to incorporate it into my projects. To test my skills, I decided to create a page that would display 16 divs with random heights and colors every time I clicked a button. However, I'm encountering an i ...

javascriptjqueryhtmlcssjquery-masonry

Is it possible for me to create a menu using the .row and .col classes from Bootstrap?

I attempted to create a menu using Bootstrap's cols. Something similar to this: https://i.stack.imgur.com/55xst.png However, I faced numerous challenges when trying to implement it into Wordpress and realized that it may not be the best approach... ...

htmlcssmenutwitter-bootstrap-3

The Prev and Next controls on the web carousel have mysteriously vanished

I managed to successfully create a carousel in the picture below, but I'm facing an issue where the next button is positioned on the white side of the page. Despite trying to enlarge the carousel's size, it ends up going below the category contai ...

htmlcarousel