The reason why the div appears below the image

Is there a way to position the div above the image rather than below it, even when setting the z-index attribute in the code?

The current code structure is as follows:

<main id="content" role="main">
  <div style="text-align: center">
    <img src="assets/header-img.jpg" style="z-index: -1;">
  </div>

  <div class="container" style="background-color: bisque; height: 1000px; margin-top: -680px"></div>
</main>

There are two questions at hand:

  1. In order to move up the container-div, the code uses "margin-top:-680px", which corresponds to the image height. Are there any alternative solutions for achieving this effect?
  2. How can the container-div be positioned above the image instead of below it?
htmlcssbootstrap-4

Answer №1

Implement relative positioning to utilize z-index effectively. This method allows you to also make use of the top property, which has proven to be more reliable than using negative margins.

The default positioning setting is static, and this does not respect the z-index property.

<main id="content" role="main">
  <div style="text-align: center">
    <img src="assets/header-img.jpg" style="position: relative; z-index: 0;">
  </div>

  <div class="container" style="background-color: bisque; height: 1000px; position: relative; top: -680px; z-index: 1"></div>
</main>

Answer №2

Adjusting the margin-top using a negative value won't move the image up; instead, it will simply bring the element above closer.

If you want the div to appear first, just place it at the top of your code. Below is a snippet demonstrating this:

<main id="content" role="main">
  <div class="container" style="background-color: bisque; height: 1000px;"></div>
  <div style="text-align: center">
    <img src="assets/header-img.jpg">
  </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

Position fixed property

While experimenting with the fixed position property to maintain a constantly positioned nav bar on mobile, I encountered some challenges during the trial and error process. However, by utilizing margin top and translation functions, I was able to successf ...

htmlcss

What is the name of the syntax highlighting plugin utilized by the Bulma CSS framework?

Does anyone know the name of the code highlighter plugin that is featured on bulma.io? I have tried looking through all sources and scripts, but I can't seem to find the plugin's name. Attached is a screenshot for reference: https://i.sstatic.n ...

htmlcssbulma

How can I effectively retrieve the JWT in a node environment?

I've successfully set up JWT authentication using Node.js. After the user signs in, Node.js generates a JWT and sends it back to be stored in the localStorage. However, I've encountered an issue when trying to access this token within the express ...

javascriptangularjsnode.jshtml

Choosing the perfect gradient shade for a progress bar canvas illustration: Tips and tricks

I am trying to customize the appearance of the usage bar in my Google Chrome extension by utilizing the features of the HTML5 canvas. Currently, the bar consists of a basic DIV element: <div id="idUsgBar"></div> accompanied by this CSS stylin ...

javascripthtmlgoogle-chromecanvas

What is the method for determining the width of a Mat-Table once it has been displayed?

When utilizing Angular Material Mat-Table in conjunction with Angular 8, I am passing the dataSource dynamically. The number of rows and columns varies each time. Is there a method to calculate the width of the table once it is rendered on the screen? &l ...

htmlangularangular-materialmat-table

Utilizing SASS for customizable color schemes

I am in the process of creating a website using Rails 3 which will allow users to customize their profiles with different layouts and color schemes. I have already implemented SASS, and I believe it would be incredibly useful if I could achieve something l ...

ruby-on-railscsssass

Executing PHP code from Javascript - Using AJAX to retrieve full HTML content of the webpage

As someone who is still getting to grips with PHP, I have been exploring ways to call a PHP method from a button. It seems that one approach involves assigning the button's onclick event to trigger a JavaScript function, which then uses Ajax to post t ...

javascriptphpjqueryhtmlajax

HTML code that has been "commented out" means

Within my _Layout.cshtml file, the following lines are present: <!--[if IE 7]> <link rel="stylesheet" type="text/css" media="all" href="/Content/css/ie7.css" /> <![endif]--> <!--[if IE 6]> <link rel="stylesheet" type="te ...

c#javascript.nethtml

jQuery failing to recognize multiple selection form elements

<select class="js-example-basic-multiple categories form-control" name="categories[]" style="width: 100%" multiple="multiple"> <option value=""></option> <option value="fresher">fresher</option> <option value=" ...

phpjqueryhtmllaravel-5.4

Guide to creating a continuous loop for CSS3 animation

I'm looking to create a setup that can play on repeat, but I'm not very familiar with jQuery. Can anyone lend a hand with this? Check out the DEMO here $('.title1').fadeIn('fast', function() { $('div').addClass ...

jqueryhtmlcssloops

Tabulated presentation of all main XML lines in contracted or expanded format

In desperate need of the following request. I have an XML file containing information about persons and their relatives. The structure is as follows (persons.xml) <persons> <person> <frst_name>Boris</frst_name> <!-- first na ...

xmlxsltbootstrap-4

React Input increases the total width by 22 pixels

My React input has a CSS setting of 'width: 300px'. However, when displayed on the screen, the width appears to be '322px'. Below is the CSS code for the input: input { width: 300px; padding: 15px 10px; border: 1px #818181 solid; ...

cssreactjs

When my screen measures 1700px wide, a width of 100% in CSS appears significantly narrower than a width of 500px

Currently, I am working on designing a responsive layout for a 3D globe. The code snippet that stores the structure is as follows: <div class="text-center main"> <canvas id='globe' width='100%' height='100%'> ...

htmlcss

Utilizing HTML/CSS (with Bootstrap): Reveal the concealed <input type="color"> color selector by clicking on a different HTML component

Is there a way to trigger a color picker from a hidden <input type="color"> by clicking on another HTML element, like a <span>? While this functionality seems to work on Firefox, it consistently fails on Chromium. Are there any cross- ...

javascripthtmlcssbootstrap-5

"Troubleshooting a Animation Problem in the Latest Version of

I have discovered an issue with animations on the latest version of Firefox Quantum. Upon loading a page with certain animated elements set to display: none;, when a script changes it to .display = "block";, some parts of the animation may be missed or no ...

javascriptcssfirefoxfirefox-quantum

Build a video card using Bootstrap 5

I have successfully implemented this sample using Bootstrap 4: <div class="row"> <div class="col-md-9"> <div class="card"> <div class="card-body pt-3 "> <h5 class=&q ...

twitter-bootstrapbootstrap-4

Deactivating multiple buttons in JavaScript after a single click: A guide

After experimenting, I've discovered a solution to my issue. I want to deactivate the option buttons in my quiz application once the user has made a selection. The reason for this is because if the correct answer is revealed and the user selects any ...

javascripthtmlbuttondisable

Transmit the value of radio button data to PHP using Ajax

I'm facing an issue in sending radio button data to PHP using JavaScript. For example, when the radio button "Mother" is selected, the value "Mother" should be sent via AJAX. However, I'm struggling to achieve this functionality and haven't ...

javascriptphpjqueryhtmlajax

Issue with embedding icon within input field in Bootstrap version 4.1

I am currently implementing a project using Angular 6 along with the latest version of Bootstrap v4.1. I am attempting to create a reactive form with icons within input fields. As there is no direct way in bootstrap to place icons on the left side of input ...

htmlcsstwitter-bootstrapbootstrap-4angular-reactive-forms

I'm working on a CSS project and my goal is to ensure that all the items are perfectly aligned in a

I have been working on a ReactJS code and I'm struggling to achieve the desired result. Specifically, I am using Material UI tabs and I want them to be aligned in line with an icon. The goal is to have the tabs and the ArrowBackIcon in perfect alignme ...

cssreactjsmaterial-ui