CSS - 如何獲取位置：絕對;與不同的屏幕很好地工作尺寸

Question

如果我想要一個元素被定位在我的屏幕上的某個位置，我可以使用：

position: absolute; 
top: 614px; 
left: 215px; 

而且我的屏幕上這個完美的作品上，該元素是正確的，我想它是。但是，如果我使用更大的屏幕，那就錯了，如果我使用非常小的屏幕，則可能必須滾動才能看到該元素。你怎麼解決這個問題？ 我試過研究，我覺得這是一個很正常的問題，但我還沒有真正發現任何有用的東西。謝謝！

Answer 1

位置絕對的CSS通過放置一些東西絕對相對於父元素。如果父元素沒有退出，它將一直默認爲html元素。基本上這意味着如果你的父母改變你的絕對定位變化。

如果您希望使用百分比來響應，則更好。您還可以根據需要使用媒體查詢來調整位置。

.my-absolute-px{ 
 
     position: absolute; 
 
     top: 100px; 
 
     left: 100px; 
 
    } 
 
    
 
    .my-absolute-percent{ 
 
     position: absolute; 
 
     top: 50%; 
 
     left: 45%; 
 
    }

 
    
 
    <div class="my-absolute-px">Some px content</div> 
 
    <div class="my-absolute-percent">Some % content</div>

Answer 2

我想你想將元素粘貼到窗口的右下角？然後，只需使用bottom:0和right:0 respecitvely：

div { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<div>text</div>

或者，如果你想它在中間位置，適用50％：

div { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
}

<div>text</div>