Exercise in positioning the black box

I have an image that I need to customize. Most of the coding is done, but I am struggling with implementing the black box. The requirements are as follows: - It should be on top of the "redbox" - It should be behind the "bluebox" - It should be on top of the "blueinbox"

https://i.sstatic.net/7RBBh.png

body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin:0 !important;
    width: 100% !important;
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    -webkit-font-smoothing: antialiased !important;
}
.container {
    background-color: #e1e1e1;
    height: 200px;
    width: 400px;
    border: 0;
    margin: auto;
    display: table;
    margin-top: 20px;
    position: relative;
}
.redbox {
    background-color: #fff;
    height: 120px;
    width: 120px;
    margin: 20px 20px 0 0;
    display: table;
    right: 0;
    border-style: solid;
    border-width: 1px;
    border-color: red;
    border-radius: 5px;
    position: absolute;
}
.bluebox {
    background-color: #fff;
    height: 120px;
    width: 120px;
    margin: 60px 60px 0 0;
    display: table;
    right: 0;
    border-style: solid;
    border-width: 1px;
    border-color: blue;
    position: absolute;
    border-left-style: dashed;
}
.blueinbox {
    background-color: #00aeef;
    height: 80px;
    width: 80px;
    margin: 20px 20px 0 0;
    float: right;
}
.ninja {
    color: #fff;
    font-family: "Open Sans", Arial, sans-serif;
    letter-spacing: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}
<body>
    <div class="container">
        <div class="redbox">
        </div>
        <div class="bluebox">
            <div class="blueinbox">
                <div class="ninja">
                    <p>NINJA!</p>
                </div>
            </div>
        </div>
    </div>
          
</body>

htmlcsspositionbox

Answer №1

Task completed.

body {
font: 500 16px 'Open Sans', Arial, sans-serif;
color: #fff;
}

.container {
position: relative;
max-width: 400px;
height: 200px;
margin: 2rem auto;
border: 1px solid #000;
background-color: #eee;
}

.box-red, .box-blue-light, .box-blue-dark, .box-black {
position: absolute;
}

.box-red {
top: 20px;
right: 20px;
width: 120px;
height: 120px;
border: 1px solid red;
border-radius: 5px;
}

.box-black {
top: 40px;
right: 40px;
width: 60px;
height: 60px;
background-color: #000;
}

.box-blue-light {
top: 80px;
right: 80px;
width: 80px;
height: 80px;
background-color: #05adeb;
}
.box-blue-light::before {
content: "";
position: absolute;
right: 0;
width: 20px;
height: 20px;
background-color: #000;
}
.box-blue-light h5 {
margin-top: 2rem;
font: 500 1rem 'Open Sans';
letter-spacing: 2px;
text-align: center;
}

.box-blue-dark {
top: 60px;
right: 60px;
width: 120px;
height: 120px;
border: 1px solid blue;
border-left-style: dashed;
background: #fff url("https://media1.giphy.com/media/fLg3MEWdgH5Ti/200.gif");
}
.box-blue-dark::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(170,50,90,.25)
}
<body>
<div class="container">
<div class="box-red"></div>
<div class="box-black"></div>
<div class="box-blue-dark"></div>
<div class="box-blue-light"><h5>NINJA!<h5></div>
</div>
</body>

Answer №2

Make sure to include z-index:1; in the CSS for .bluebox.

body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin:0 !important;
    width: 100% !important;
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    -webkit-font-smoothing: antialiased !important;
}
.container {
    background-color: #e1e1e1;
    height: 200px;
    width: 400px;
    border: 0;
    margin: auto;
    display: table;
    margin-top: 20px;
    position: relative;
}
.redbox {
    background-color: #fff;
    height: 120px;
    width: 120px;
    margin: 20px 20px 0 0;
    display: table;
    right: 0;
    border-style: solid;
    border-width: 1px;
    border-color: red;
    border-radius: 5px;
    position: absolute;
}
.bluebox {
    background-color: #fff;
    height: 120px;
    width: 120px;
    margin: 60px 60px 0 0;
    display: table;
    right: 0;
    border-style: solid;
    border-width: 1px;
    border-color: blue;
    position: absolute;
    border-left-style: dashed;
    z-index: 1; /* Add this line */
}
.blueinbox {
    background-color: #00aeef;
    height: 80px;
    width: 80px;
    margin: 20px 20px 0 0;
    float: right;
}
.blackbox {
    background-color: #000;
    height: 80px;
    width: 80px;
    margin: 20px 20px 0 0;
    float: right;
}
.ninja {
    color: #fff;
    font-family: "Open Sans", Arial, sans-serif;
    letter-spacing: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}
<body>
    <div class="container">
        <div class="redbox">
            <div class="blackbox"></div>
        </div>
        <div class="bluebox">
            <div class="blueinbox">
                <div class="ninja">
                    <p>NINJA!</p>
                </div>
            </div>
        </div>
    </div>
</body>

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

Setting initial opacity for CSS on page load

I'm not a pro at web design, but I'm trying to create my own website. I've divided my page into two sections - the left side for the menu bar and the right side for content. To add a 'cool' blur effect over my menu bar, I decided t ...

htmlcss

What is the best method for creating a header design in CSS?

My website code is pretty standard <div class="header"></div> <div class="site-inner"></div> <div class="footer"></div> How can I achieve a header background like the one shown in the image? Do I need to set the entire ...

htmlcssheaderfrontendabsolutelayout

White Background Dialog in Angular

I am struggling to change the default white background of my webpage. Is there a way I can use CSS to blur or darken the background instead? I tried applying CSS code but couldn't locate the correct class. I also attempted setting the "hasBackdrop" at ...

cssangular

Ways to extract content within the <p> element

How can I access and retrieve the string inside a "p" tag, even after it has been changed? I've tried various methods but haven't found a solution yet. I have tested different approaches, such as: .text(); .val(); (even though this is typi ...

javascriptjqueryhtml

Close the Bootstrap modal upon clicking the "Ok" button in SweetAlert2

I need help with closing my Modal Bootstrap after clicking the Ok button in SweetAlert. I've attempted various methods, but none of them have worked so far. I'm not sure if I'm implementing it correctly, but I've utilized JQuery for thi ...

htmljquerytwitter-bootstrap

The Jquery instructions were not executed

Enjoy your day! I have recently downloaded the latest compressed version of jQuery from a lesson site here (Download the compressed, production jQuery 3.6.0) After that, in my HTML document, I included it like this: <head> <meta charset = &qu ...

javascripthtmljquery

In HTML, data can be easily accessed, however, JavaScript does not have the same

When trying to access the 'data' element in a JSON object, I have encountered an issue. The element is accessible when called from HTML, but not when called in JavaScript. HTML: <p>{{geoJson.data}}</p> JavaScript: let scope; let d ...

javascripthtmlangularjs

Achieving Inline Icons with Text in Bootstrap 5 Button

Looking for some assistance <div class="col-auto mt-lg-0 mt-2"> <a href="#" style="--bs-btn-font-size: .95rem;" class="btn btn-outline-secondary"> <i class="bi bi-download"></i&g ...

htmlbootstrap-5

What could be causing the malfunction of this JavaScript dropdown select feature in Internet Explorer?

I created a website that requires users to input their location, including the city and state. The process involves two dropdown menus: - The first dropdown menu, labeled "state," loads all USA states as selectable options when the website is loaded. This ...

javascriptjqueryhtmljsoninternet-explorer

The final section of this code is failing to process PHP forms

My current project involves developing a form in PHP that fetches values from a database. The first code block, which checks for the existence of a value using if (!isset($_POST['nieuweBest'])), is functioning correctly. The second code blo ...

phphtmlmysql

Unable to initiate script on dynamically appended element

I am facing a similar issue as described in this post: Click event doesn't work on dynamically generated elements , however, the solution provided there did not work for me since the post is a few years old. My problem involves an image carousel that ...

jqueryhtml

The two CSS classes are styled with different border-color values, but only one is being applied correctly

My goal is to modify the border color of a textarea using jQuery. Previously, I achieved this by using .css("border-color","rgb(250,0,0)"), and it was working perfectly. However, I have now been advised against using CSS directly in JavaScript and told to ...

javascriptjqueryhtmlcss

Unexpected issue on AngularJS application

Encountering issues with incorporating a controller into my page - each time I add it to a DOM element, an error is thrown. Here's the structure of my HTML page: <html data-ng-app="sportsStore"> <head> <title>Sports Sto ...

javascripthtmlangularjsangularjs-directive

Measure with an "em" unit indicated by a dot

Could you clarify if there is a distinction between writing padding:.6em and padding:0.6em; and if they have the same value, why not just use padding:0.6em; ? Thank you ...

css

Is it possible to merge elements into a carousel in the mobile display?

I have a collection of elements that I would like to combine into a swipeable carousel. Is there a way to achieve this, specifically to make it a carousel only in mobile view? If needed, here is the HTML code. Thank you for your assistance. <div class= ...

htmlcssbootstrap-4slidercarousel

What is the best way to add a textfield within an image?

Does anyone have a code snippet that can generate a "search box" like the one on www.dx.com? I was shocked to find that searching for "textfield inside image" only yielded results for "image inside textfield". ...

htmlcss

What is the best way to transfer the value of a radio button, retrieved from a database, to a textbox?

Greetings, I am trying to figure out how to pass the value of a radio button to a textbox using jQuery and PHP. The radio buttons are generated dynamically based on rows from my database, so I set the row ID as the ID for each radio button. However, the co ...

javascriptphpjqueryhtml

"Getting Started with Respond.js: A Step-by-Step

I've been struggling to find clear instructions on how to properly set up respond.js. Should I just unzip it into the htdocs folder, or do I only need respond.min.js in there? Then, do I simply reference the file like this... <script src="respon ...

javascriptphphtmlcss

What is the method for placing text underneath your background image?

click here for image I am trying to set a full viewport background image by applying it to the body tag. Currently, I have successfully achieved this with the following CSS code: body { background-image: url(/picture.jpg); } However, I also want to displ ...

csshtmlbootstrap-4

Display or hide a div element when hovering over it, while also being able to select the text within

I am trying to display and conceal a tooltip when hovering over an anchor. However, I want the tooltip to remain visible as long as my cursor is on it. Here is the fiddle link $('#showReasonTip').mouseover(function(){ $(this).parent().find(&apo ...

javascriptjquerycss