I am having trouble solving this practice question: Using CSS, position the .black-box element in the bottom left of the container and the .blue-box in the top right. Position them so that their corners are flush with the container corners. Where do I start?
You’ve probably figured it out by now, but I got it by switching their positions to relative and moving the boxes based on the given dimensions of the boxes and container. For example, it shows the container is
Height:200 px;
Width: 300px:
.box
Height: 50px:
Width: 50px
So to move the blue box to the top right corner it has to be moved 250px to the right and 50px higher. I got that with the following:
.blue-box {
position: relative;
left: 250px;
bottom: 50px;
}
I was stuck for a while on it, and maybe there’s a better way, but this worked for me.
1 Like