CODEWITHSUNDEEP
htmlcsscss-position
j.xiang
j.xiang

Reputation: 73

right not working but left is at position: absolute;

.act{
    text-align: center;
    height: 100%;
    width: 100%;
}

/* arrows*/
.left_arrow{
    top: calc(117.2% + 12.75vh);
    left: 19%;
    transform: rotateZ(90deg);
}

.right_arrow{ 
    top: calc(117.2% + 12.75vh);
    right: 19%;
    transform: rotateZ(-90deg);
}

.act img{
    position: absolute;
}
<div class="act">
            <img src="./landingPage/down arrow black.png" alt="left arrow" class="left_arrow">
            <img src="./landingPage/down arrow black.png" alt="right arrow" class="right_arrow">
</div>

The 'right: 19%;' at the .right_arrow is not working but 'left' is working at the .left_arrow .

Anyone knows why?

Upvotes: 2

Views: 3148

Answers (3)

miri W.
miri W.

Reputation: 241

In my case I had left propety set in another css class thats why the right wasn't applied, I added left:unset;

and then the right was applied

Upvotes: 0

Mehrad
Mehrad

Reputation: 1543

@j.xiang,

I highly recommend that you read: MDN Docs regarding positioning. To answer your question on why your code isn't working and why:

An absolutely positioned element no longer exists in the normal document layout flow. Instead, it sits on its own layer separate from everything else. This is very useful: it means that we can create isolated UI features that don't interfere with the position of other elements on the page. For example, popup information boxes and control menus; rollover panels; UI features that can be dragged and dropped anywhere on the page; and so on...

Second, notice that the position of the element has changed — this is because top, bottom, left, and right behave in a different way with absolute positioning. Instead of specifying the direction the element should move in, they specify the distance the element should be from each containing element's sides. So in this case, we are saying that the absolutely positioned element should sit 30px from the top of the "containing element", and 30px from the left.

Now you may have already been familiar with the above statement, which brings us to why and the positioning context.

If no ancestor elements have their position property explicitly defined, then by default all ancestor elements will have a static position. The result of this is, the absolutely positioned element will be contained in the initial containing block. The initial containing block has the dimensions of the viewport and is also the block that contains the element. Simply put, the absolutely positioned element will be contained outside of the element, and be positioned relative to the initial viewport.

The positioned element is nested inside the in the HTML source, but in the final layout, it is 30px away from the top and left of the edge of the page. We can change the positioning context — which element the absolutely positioned element is positioned relative to. This is done by setting positioning on one of the element's ancestors — to one of the elements it is nested inside (you can't position it relative to an element it is not nested inside). To demonstrate this, add the following declaration to your body rule:

   position: relative;

So adding position: relative; to your .act class should fix your specific problem.

I hope this helps, again start your reading on the MDN site it's an invaluable resource.

Upvotes: 0

thehuijb
thehuijb

Reputation: 239

add position:relative; to .act class and it should work

the position:absolute; on the img element looks for a container to position itself against, this container has to have x, y, height and width values inside the DOM. giving the parent element (in this case .act) position:relative; ensures the element has a x, y, width and a height onto with the img elements can be placed

Upvotes: 1

Related Questions