Challenges arising from using 'top: 0px' in absolute positioning

I've been attempting to position some tags at the top: 0px of certain divs.

The issue I'm facing is that when I use "top: 0px", it doesn't align my elements to the top of the parent div.

After researching, it seems like this might be a "Collapsing Margin" problem..

I tried to troubleshoot on my own, but couldn't find a solution without compromising the main structure (centered main class, header with 100% width, etc.)

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 50%;
  background-color: grey;
  position: fixed;
  top: 0px;
  width: 100%;
  height: 50px;
  z-index: 1000;
}

.topzone {
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main {
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 950px;
}

.inside-main {
  background-color: white;
  width: 100%;
  height: 375px;
}

.inside-title {
  justify-content: center;
  text-align: center;
  width: 75%;
  margin: 0 auto;
}

.inside-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  width: 75%;
  margin: 0 auto;
}

.inside-content div {
  position: relative;
  width: 30%;
  margin: 0px 10px 0px 10px;
}

.inside-content img {
  width: 100%;
}

.inside-content div h3 {
  position: absolute;
  top: 0px;
  width: 100%;
}
<header>
  <div>
    <button id="login">1</button>
    <button id="signin">2</button>
  </div>
</header>

<div class="topzone">
  <h1>TOP ZONE TITLE</h1>
</div>

<div class="main">
  <div class="inside-main">
    <div class="inside-title">
      <h1>INSIDE TITLE ZONE</h1>
    </div>
    <div class="inside-content">
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 1</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 2</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 3</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 4</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 5</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 6</h3>
      </div>
    </div>
  </div>

In this case, Box1, Box2, etc., should align at the same height as the top line of every box.

https://i.sstatic.net/OQgKx.png

Thank you

htmlcsslayoutpositionmargin

Answer №1

Due to the default margin settings of H3, both top and bottom margins are present. By simply adding margin: 0 in the CSS for H3, the issue can be resolved. I have made this adjustment in your code. I hope this solution helps you. Thank you.

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 50%;
  background-color: grey;
  position: fixed;
  top: 0px;
  width: 100%;
  height: 50px;
  z-index: 1000;
}

.topzone {
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main {
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 950px;
}

.inside-main {
  background-color: white;
  width: 100%;
  height: 375px;
}

.inside-title {
  justify-content: center;
  text-align: center;
  width: 75%;
  margin: 0 auto;
}

.inside-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  width: 75%;
  margin: 0 auto;
}

.inside-content div {
  position: relative;
  width: 30%;
  margin: 0px 10px 0px 10px;
}

.inside-content img {
  width: 100%;
}

.inside-content div h3 {
  position: absolute;
  top: 0px;
  margin: 0;
  width: 100%;
}
<header>
  <div>
    <button id="login">1</button>
    <button id="signin">2</button>
  </div>
</header>

<div class="topzone">
  <h1>TOP ZONE TITLE</h1>
</div>

<div class="main">
  <div class="inside-main">
    <div class="inside-title">
      <h1>INSIDE TITLE ZONE</h1>
    </div>
    <div class="inside-content">
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 1</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 2</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 3</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 4</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 5</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 6</h3>
      </div>
    </div>
  </div>

Answer №2

To ensure proper positioning of absolute items within a div, it is important to set the position of the div as "relative". Otherwise, the divs will be positioned relative to their closest parent with a relative positioning, typically the body element.

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

How can I incorporate a .shtml file into a .php webpage?

Is there a way to include a .shtml file within a .php page? I know it can be done, as I have successfully achieved this in the past (although I cannot remember the exact code). Can someone please assist me with this? ...

phphtmlshtml

Issue with "repeat-x" causing distortion in mobile image display

My repeating background image (.png) looks great on desktop with repeat-x, but on mobile, it has a slight repeat-y edge at the top: https://i.sstatic.net/yFfea.jpg The source image is 300px wide and 100px high, and the CSS for this div is: background: u ...

htmlcss

Make the header stretch to the top of the page using CSS rounded edges

I'm trying to eliminate the white space above my blue header on a webpage with rounded corners. The header is at the top of the wrapper, but there's some empty space before it starts. Is there a way to make the header start right at the top edge ...

htmlcss

Different way of maintaining placeholder text in HTML

I've created a Registration Form using Razor syntax with the code snippet below: <div id="RegisterDiv" class="is-hidden"> @using (Html.BeginForm("Register", "User", FormMethod.Post, new { id = "frmRegister" })) { ...

htmlasp.net-mvc-4razorrazor-2

Is there a way to set the focus on a text box automatically when a page is loaded, even without support for JavaScript?

On my form, I have a few text fields and I am looking to automatically set the cursor (auto focus) on the first text field when the page loads. I aim to accomplish this without relying on javascript. ...

csshtml

Odd Behavior when altering button attribute using Jquery

After disabling a button with a click handler, I have noticed an interesting behavior where the button does not submit afterwards. The issue seems to vary between different browsers, with Firefox still allowing form submission after the button is disabled, ...

javascriptjqueryhtmlformsbutton

Updating style of an element by hovering over another

What is the best way to change the CSS of one element when hovering over another element in CSS? We can achieve this using the following code: .example .example2 li:hover .element If our HTML looks like this: <div class='example'><di ...

htmlcsscss-selectors

CSS fails to display image within PHP script

Having an issue with displaying CSS through a PHP file. Everything seems to be working fine until I try to display an image from the database. The source code does accept the value from the DB, but the image doesn't show up. Interestingly, the image d ...

phpcssimage

How to Utilize ngIf and ngFor Together in Angular 4 for the Same Element in ngFor

Just starting with Angular 4 and experiencing a roadblock in my code. Here is the snippet of my code: JSON: [{"name": "A", "date": "2017-01-01", "value": "103.57"}, {"name": "A", "date": "2017-01-08", "value": "132.17"}, ...

htmlarraysjsonangulartypescript

Accepting PHP multidimensional array through ajax

My PHP code includes a script to open a database, fetch data, and encode it into JSON format. include_once($preUrl . "openDatabase.php"); $sql = 'SELECT * FROM dish'; $query = mysqli_query($con,$sql); $nRows = mysqli_num_rows($query); if($nRow ...

javascriptphphtmlajaxhtml-framework-7

Effortlessly Concealing Numerous Elements with a Single Click in Pure JavaScript

I have successfully created an HTML accordion, but I am facing an issue. I want to implement a functionality where clicking on one accordion button will expand its content while hiding all other accordion contents. For example, if I click on accordion one ...

javascripthtml

The Bootstrap carousel spiraled into disarray

I am facing an issue with the basic bootstrap carousel. My goal is to make the slides move every four seconds. The current setup of the carousel code is as follows: $(document).ready(function() { fixCarousel(); }); function fixCarousel() { $('.c ...

javascripthtmlcsstwitter-bootstrap

Eliminate the space beneath the panel header in Bootstrap version 3.3.4

Can anyone help me understand why there is extra padding appearing under the drop-down select list in my panel header? picture <div class="panel panel-default"> <div class="panel-heading clearfix"> <h3 class="panel-title pull-l ...

htmlcsstwitter-bootstrap

Effective ways to implement Select2 tags while utilizing the newline character tokenSeparator

I'm currently working on a select2 input feature that allows users to paste CSV data and have it converted into tags. One issue I am facing is the inability to create tags from vertically copied data. This is due to select2 using an <input type="te ...

jqueryhtmljquery-select2

Creating a layout with two divs displayed next to each other using CSS

Just when I thought I had it figured out, my two side-by-side divs are not behaving as intended inside the parent div. Why is the orange "Content" div ending up below the navigation bar? Can anyone spot what I did wrong here? Thank you in advance! CSS: ...

css

Unable to alter the background color in a table row when a condition is verified

Within my 'work' array that is generated from an Excel file, I have values for employee_id (referred to as id), projects, and hours. Additionally, I have another array called 'employees' which contains all the employees in my database. ...

phphtmlcssarrayslaravel

Performing an AJAX request inside of another AJAX request

I have integrated buttons into my website that are activated by JS AJAX loads. By clicking on these buttons, a JavaScript function is executed to load the contents of a PHP file into a specific div element. This setup is crucial as I want to avoid the enti ...

phpjavascripthtmlajax

Learn the method for printing CSS outlines and background colors in IE8 using JQuery's printElement feature

Printing my HTML calendar table in Chrome results in a perfect display. However, when I try to print it in IE8, the background colors and images are not included. Despite following steps from a helpful post on setting it as the default option, there were n ...

jquerycssprintinginternet-explorer-8

Incorporate ng-model to manage dynamically generated HTML elements

I have created dynamic div elements with a button inside, and I want to access its value using ng-model, but the value is not being retrieved. Here is my code: var url = "/api/chatBot/chatBot"; $http.post(url,data) .success(function(data){ $scope.mes ...

javascripthtmlangularjs

What is the best way to access an email link from an existing browser window?

Currently in the process of creating a Signup/Verify Email system. Here is how it works: User signs up on a webpage at /Signup.aspx and provides their email address (they are instructed to check their email). They receive an email titled "Verify your ema ...

asp.nethtml