What is the best way to position a container on top of a div element

Is this question a bit unusual? Here's the code snippet:

body{
    background-color: rgba(38, 38, 38, 1);
}
.inside-box {
    border: 15px solid rgba(38, 38, 38, 1);
    height: 95vh;
    border-radius: 25px;
    background: rgba(26, 26, 26, 1);

  }
  
.outside-box {
    background: rgba(38, 38, 38, 1);

  }
  .flex-container-top {
    height: 5vh;
    background-color: red;
  }
<div class="flex-container-top">     
    </div>
    <div class="outside-box">
     <div class="inside-box"></div>
    </div>

I'm not sure if I formatted the code correctly, but here is what I have:

Current Layout

Desired Outcome

Don't get too caught up in dimensions, I just need to know how to layer elements.

htmlcss

Answer №1

Based on the guidelines you provided and the image you shared, I have tailored this design to meet your specifications.

Please let me know if you would like any adjustments to the background colors and elements height to better suit your needs.

body{
    margin: 0;

}
.flex-container-top {
    height: 15vh;
    background-color: red;
  }
.outside-box {
    background: #666;
    height: 85vh;
    padding-bottom: 15px;
  }
.inside-box {
    background: #333;
    height: 100%;
border-radius: 5px;
margin: 0 15px;
  }
<div class="flex-container-top"></div>
<div class="outside-box">
  <div class="inside-box"></div>
</div>

Answer №2

It seems like this is the solution you were looking for. Remember that when you adjust an element to position: absolute, it's important to also specify the width of the element. Setting the values of top and left to 0 will position it at the edge of the screen.

body {
  background-color: rgba(49, 49, 49, 1);
}

.inside-box {
  border: 12px solid rgba(29, 29, 29, 1);
  height: 90vh;
  border-radius: 20px;
  background: rgba(19, 19, 19, 1);
}

.outside-box {
  background: rgba(49, 49, 49, 1);
}

.flex-container-top {
  height: 4vh;
  background-color: blue;
  position: absolute;
  z-index: 6;
  width: 100%;
  top: 0;
  left: 0;
}
<div class="flex-container-top">
</div>
<div class="outside-box">
  <div class="inside-box"></div>
</div>

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

When trying to display an image in Firefox, it works perfectly with the ng-src attribute, but unfortunately,

When using ng-src to load a remote image in my web app, I encountered an issue where the image loads perfectly fine in Firefox but not in Chrome. Here is the HTML element I am utilizing: <a href="#/wep/{{wep.name}} | {{skin.skinName}}"><img ng-sr ...

javascripthtmlangularjsimagegoogle-chrome

Can the combination of two .html files create a single file?

Currently, I am in the process of learning how to create a website using Google App Engine with Python 2.7 and Jinja2. I have a question regarding the possibility of combining two separate HTML files into one. In the main HTML file, my goal is to include ...

htmlgoogle-app-enginejinja2

Hide the selection box when hovering over the Div

Looking for a quick solution. I want the option drop down to close when another div element is hovered over. First, open the drop down and hover over the red element on the right side. When hovering over the red element, I would like the drop down to clos ...

javascriptjqueryhtmlcss

What is the best way to reveal a hidden div using JavaScript after a form submission?

jQuery is not a language I am very familiar with, but I am attempting to display a simple animated gif when a form is submitted. When users click 'submit' to upload an image, I want the gif to show to indicate that the image is being uploaded. Th ...

javascripthtml

Can you explain the meaning of -ms-value?

I recently came across a solution for an issue specific to IE, and it worked perfectly for me. You can find the solution here: Change IE background color on unopened, focused select box However, I'm still puzzled about the meaning of -ms-value. Any i ...

cssinternet-explorer-11

Please indicate the decimal separator for the Number() function

UPDATE : TITLE IS MISLEADING as testing showed that Number() returned a dot-separated number and the HTML <input type="number"/> displayed it as a comma due to locale settings. I changed to using an <input type="text"/> and filtered keydown lik ...

javascripthtmlangularjs

Difficulty achieving gradient effect with partial background color change in table-cell

In order to achieve a unique look for this particular design, I am seeking ways to alter the red background color of each cell in varying degrees - such as 100% for the first cell, 100% for the second cell, and 50% for the third cell. Update: After experi ...

htmlcssbackground-colorlinear-gradients

Is it possible to still alter options in a read-only Select component in Twitter Bootstrap

Even though I have set my bootstrap select to readonly="true", I am still able to change the selected option. I tried using disabled="true", but then the select is not included when submitted. Is there a way to achieve a combination where the selected op ...

jquerycsstwitter-bootstraptwitter-bootstrap-3yii2

Apply the CSS rule specifically for desktop screens, excluding mobile and tablet devices

My website has a logo in the header that appears too small on computer screens. I came across a code snippet that allows me to increase the size of the logo, but I only want this change to be applied on computers and not on mobile or tablet devices. The co ...

htmlcsswordpress

What could be the issue with my dropdown navigation bar?

Currently in the process of learning CSS and HTML, I wanted to create a basic dropdown menu using CSS exclusively. However, there are some aspects that are unclear to me, so I would appreciate any assistance in figuring out what is happening. Here is how ...

htmlcssdrop-down-menu

Creating a SVG polygon using an array of points in JavaScript

Consider the following array containing points: arr = [ [ 0,0 ], [ 50,50 ], [ 25,25 ], ]; I would like to create an SVG polygon using this array. Initially, I thought the code below would work, but it doesn't: <polygo ...

javascriptarrayshtmlsvg

Creating a form using Flexbox and responsive design

Looking to implement a responsive login form using Flexbox and achieve a design similar to the mockup images. How can I accomplish this? .wrapper { display: flex; flex-flow: row wrap; text-align: center; background: linear-gradient(to bo ...

htmlcssflexbox

Track how far visitors scroll into the inner content area using Google Tag Manager

Our website features a left-side vertical navigation menu. In order to measure scroll depth, we incorporated Tag Manager code. However, the Tag Manager code triggers on every page load due to us fixing the body scroll and implementing a custom scroll for t ...

htmlgoogle-analyticsgoogle-tag-manager

Obtain the value of a range using JQuery

I made an attempt to retrieve the value of JQuery's range slider when it changes. Here is how I tried: On the HTML/PHP page: <div class="total"> <label for="">Total</label> <p><span class="monthrc"></span ...

javascriptjqueryhtmljquery-ui

Learn the process of including an active class using jQuery from an external active.js file!

This JavaScript code snippet $(function() { $("#navbar-nav li").click(function($) { // remove classes from all $("li").removeClass("active"); // add class t ...

phphtmljquerybootstrap-4

Angular 2: Enhancing Tables

I am looking to create a custom table using Angular 2. Here is the desired layout of the table: https://i.sstatic.net/6Mrtf.png I have a Component that provides me with data export class ResultsComponent implements OnInit { public items: any; ngO ...

javascripthtmlcssangulartypescript

How to Exclude Specific Div from CSS Stylesheet Styling

Currently, I am utilizing the bootstrap CSS framework for a specific page on my website. The issue arises when the CSS styling included in Bootstrap interferes with the formatting of my sidebar by changing its color, font size, and font family. Is there a ...

htmlcsstwitter-bootstrap

What is the best method for choosing the parent elements?

I am attempting to create a sidebar that saves the last clicked link in local storage and still displays the collapsed links after the page is reloaded. $(".clickedLink").parent().parent().css('background-color', 'green'); Ca ...

javascripthtmljqueryparent

Tips for refreshing HTML multiple file upload without reloading the page

I am currently working on a feature that involves counting the number of files uploaded. If more than 10 images are uploaded, I want to clear the input field while keeping everything else in the form intact. Everything was working fine until I encountered ...

javascriptjqueryajaxhtml

How do you implement radio button logic within an *ngFor loop?

When I populate options in a form with radio buttons, I am not seeing isChecked set to true when I select an option. Am I missing something in the following Angular code? app.component.html <div class="form-group"> <label>answerOption</la ...

javascripthtmlangulartypescript