Why is the <div> with position-absolute and start-100 positioned outside the container?

.element
{
background-color: black;
margin-left: 30rem;
margin-right: 30rem;
margin-top: 13rem;
height: 200px;
}
.element
{
background-color: black;
margin-left: 30rem;
margin-right: 30rem;
margin-top: 13rem;
height: 200px;
}
<div class="element" style="position:relative;">
<div class="" style="postion:absloute; left:100%;">
<p class="text-danger fs-4">Text</p>
</div>

</div>
<div class="element" style="position:relative;">
<div class="" style="postion:absloute; left:100%;">
<p class="text-danger fs-4">Text</p>
</div>

</div>
No description
13 Replies
Mannix
Mannixβ€’4w ago
what is start-100 supose to be? you are just stating where the absolutely position element should start there is nothing to prevent it from overflowing
steven preadly
steven preadlyβ€’4w ago
@Mannix its a bootstrap class that got translate to `left:100;"
MarkBoots
MarkBootsβ€’4w ago
well, because you say it has to start 100% from the left of the container. so that is right of the container
Mannix
Mannixβ€’4w ago
what you expected to happen ?? I'm guessing you wanted to put the text in the top right corner?
steven preadly
steven preadlyβ€’4w ago
so its suppose to be right:0% correct?
Mannix
Mannixβ€’4w ago
yeah try end-0 instead of start-100 πŸ™‚ or right: 0;
steven preadly
steven preadlyβ€’4w ago
in most cases don't like to use the bootstrap positioning classes specially the in part of re positioning like end start ,buttom , top i have some conflicts regarding left and right, where do any of them starts when i set right:0% this means start from the left and when i use right:100% this means start from the right is that correct ?
MarkBoots
MarkBootsβ€’4w ago
with left the left edge of the element will start n-amount from the left side of the container. with right the right edge of the element will start n-amount from the right side of the container
steven preadly
steven preadlyβ€’4w ago
the secound one will start from right and move to the right
MarkBoots
MarkBootsβ€’4w ago
No description
steven preadly
steven preadlyβ€’4w ago
so in case of the relative its better to us rem or px if i am using it alone
MarkBoots
MarkBootsβ€’4w ago
depends on what you want, im just pointing out from where the position is calculated
steven preadly
steven preadlyβ€’4w ago
@MarkBoots @Mannix thank you