Arrange 4 divs (children) at each corner of the parent element

Question

Arrange 4 divs (children) at each corner of the parent element

Currently, I am facing a challenge in positioning 4 divs in the corners of their parent div. The HTML code structure is as follows:

<div class="resize">
    <div class="n w res"></div>
    <div class="n e res"></div>
    <div class="s e res"></div>
    <div class="s w res"></div>
</div>

The associated CSS styling is outlined below:

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: relative;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
}

Despite the defined styling, the .res div elements are not aligning correctly at the corners...

If you have any insights on how to resolve this issue, please provide guidance.

Link to JSFIDDLE for reference

html css

Answer 1

Answer №1

To make the code work properly, you should update the position type of .res to absolute and add position:relative in the resize class.
It is important for absolute divs to be nested within a relative positioned parent to function correctly.
Give this a try:

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position:relative;
}

DEMO

Answer 2

To make the code work properly, you should update the position type of .res to absolute and add position:relative in the resize class.
It is important for absolute divs to be nested within a relative positioned parent to function correctly.
Give this a try:

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position:relative;
}

DEMO

Answer 3

Answer №2

If you want to achieve your goal, make sure to incorporate position:absolute; in the styling of the .res div elements. Remember that for an absolutely positioned div (such as .resize in your scenario), its parent should have a relatively positioned element.

For additional details, check out this resource.

Access the FIDDLE here

CSS :

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position:absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    position: relative;
    width: 100px;
    background: red;
    height: 100px;
}

Answer 4

If you want to achieve your goal, make sure to incorporate position:absolute; in the styling of the .res div elements. Remember that for an absolutely positioned div (such as .resize in your scenario), its parent should have a relatively positioned element.

For additional details, check out this resource.

Access the FIDDLE here

CSS :

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position:absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    position: relative;
    width: 100px;
    background: red;
    height: 100px;
}

Answer 5

Answer №3

Are you aiming for this specific outcome?

Here is the HTML code:

<div class="resize">
    <div class="n w res"></div>
    <div class="n e res"></div>
    <div class="s e res"></div>
    <div class="s w res"></div>
</div>

This is the CSS code:

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position: relative;
}

Check out the demo to see it in action.

The utilization of the position property leads to the creation of a new block formatting context, which will be in relation to the nearest ancestor with a defined position property.

Answer 6

Are you aiming for this specific outcome?

Here is the HTML code:

<div class="resize">
    <div class="n w res"></div>
    <div class="n e res"></div>
    <div class="s e res"></div>
    <div class="s w res"></div>
</div>

This is the CSS code:

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position: relative;
}

Check out the demo to see it in action.

The utilization of the position property leads to the creation of a new block formatting context, which will be in relation to the nearest ancestor with a defined position property.

Answer 7

Answer №4

To achieve the desired layout, I suggest positioning the resizing div as relative and the four contained divs as absolute (assuming that the intention is for the four divs to be located within the resize div):

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: 0px; }
.resize .res.s { bottom: 0px; }
.resize .res.w { left: 0px; }
.resize .res.e { right: 0px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position: relative;
}

Answer 8

To achieve the desired layout, I suggest positioning the resizing div as relative and the four contained divs as absolute (assuming that the intention is for the four divs to be located within the resize div):

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: 0px; }
.resize .res.s { bottom: 0px; }
.resize .res.w { left: 0px; }
.resize .res.e { right: 0px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position: relative;
}

Answer 9

Answer №5

In order to resize the div, you must set the position relative for the outer div and position absolute for the inner div.

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position: relative;
}

Answer 10

In order to resize the div, you must set the position relative for the outer div and position absolute for the inner div.

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position: relative;
}

Answer 11

Answer №6

Make sure to include position: relative in .resize and position: absolute in .resize .res

Check out this example on jsfiddle

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position:relative;
}

Answer 12

Make sure to include position: relative in .resize and position: absolute in .resize .res

Check out this example on jsfiddle

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position:relative;
}

Answer 13

Answer №7

To ensure proper alignment, remember to declare parent as relative and child as absolute

Check out the demonstration here

If you haven't specified the position of the parent element, that could be the issue:

.resize{
   position: relative; /*make sure this is included */
}
.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute; /*this line was updated*/
}

Answer 14

To ensure proper alignment, remember to declare parent as relative and child as absolute

Check out the demonstration here

If you haven't specified the position of the parent element, that could be the issue:

.resize{
   position: relative; /*make sure this is included */
}
.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute; /*this line was updated*/
}

Answer 15

Answer №8

You have chosen to utilize position: relative for the small rectangles, signifying their position in relation to the original point.

In order to accurately position them in the corners, relative to their parent container, it is necessary to apply the following CSS:

.resize {
    position: relative;
}
.resize .res {
    position: absolute;
}

Feel free to view the updated JSFiddle demo

Answer 16

You have chosen to utilize position: relative for the small rectangles, signifying their position in relation to the original point.

In order to accurately position them in the corners, relative to their parent container, it is necessary to apply the following CSS:

.resize {
    position: relative;
}
.resize .res {
    position: absolute;
}

Feel free to view the updated JSFiddle demo

Arrange 4 divs (children) at each corner of the parent element

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Troubleshooting a jQuery Selector Issue with a Dynamic Form

Unable to manipulate or customize the V-slot component

What could be causing my CSS transitions to fail when using jQuery to add classes?

In the process of transforming my JavaScript code into JQuery

Steps to create a clickable drop-down arrow with a label

JavaScript is unresponsive and fails to display

Setting up JW Player with a YouTube Embed URL

Modify the colors of the chartist fill and stroke using JavaScript

Tips for retrieving the selected option from a dropdown menu

Jquery's mouseclick event selects an excessive number of elements

Capturing HTML elements based on their class names using regular expressions

Ways to center vertically aligned buttons within cards in a React application with Material-UI

The CSS on my website is causing issues with the recaptcha functionality

Can you answer this straightforward query about CSS positioning?

The Jquery navigation and image display features are experiencing technical difficulties in Internet Explorer

The JavaScript program for the shopping list is experiencing issues with the formatting of list items

Tips for separating the 'title' and 'icon' elements within Bootstrap panels?

Align two columns using the vertical alignment feature in the Bootstrap grid system

Verify the fonts that are functioning correctly

Is there a way for me to display a gif similar to 9GAG on my