在CSS的非JavaScript用戶硬編碼元件位置

我有一個HTML的文檔作爲顯示在下面的圖中，其被構造：在CSS的非JavaScript用戶硬編碼元件位置

其表示圖片的標題說明的文本是紅色塊使用CSS相對於文本中的腳註編號進行放置。如果文本有很多註釋和/或註釋的文字很長，則註釋重疊。爲了防止這種行爲，我使用JavaScript來設置這些元素的上邊距，以便將它們向下移動。

爲了防止在未啓用JavaScript的情況下網站無法使用，我想硬編碼需要在CSS文件中向下移動的元素的上邊距值。要考慮到不同的屏幕分辨率，我想使用CSS @media -query爲其他屏幕分辨率設置不同的頂部邊距。

例子：

@media(min-width: 80em) { 
    .container { width: 40em; } 
    #sidenote-45 { margin-top: 15px; } 
    [...] 
} 

@media(min-width: 60em) { 
    .container { width: 30em; } 
    #sidenote-56 { margin-top: 28px; } 
    #sidenote-89 { margin-top: 12px; } 
    [...] 
} 

[maybe more @media-queries for other screen sizes]

，你怎麼看待這種做法？

來源

2016-12-01 Thorsten

請記住有噸的屏幕尺寸。會太多。 – Zoedia

對於初學者，請使用position：absolute或transforms。 – jkris

@jkris爲什麼？你能詳細說明嗎？ – Thorsten

您可以使用相對絕對位置的容器放置票據在div的左邊或右邊，如果你不設置top屬性框在其與數對準位置保持。事情是這樣的：

.container { 
 
    border: solid 2px black; 
 
    background: white; 
 
    width: 30%; 
 
    margin: 20px auto; 
 
    position: relative; 
 
} 
 

 
sup { 
 
    color: red; 
 
} 
 

 
.notes { 
 
    position: absolute; 
 
    left: -220px; 
 
    color: black; 
 
    display: block; 
 
    background: #8ac88a; 
 
    width: 200px; 
 
    font-size: 14px; 
 
    padding: 5px; 
 
    margin-top: -10px; 
 
} 
 

 
.right { 
 
    left: auto; 
 
    right: -220px; 
 
}

<div class="container"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. In dolorum voluptate provident doloremque aperiam laboriosam ea, vel nihil illum, beatae nemo mollitia possimus, velit<sup>1<span class="notes">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, et!</span></sup> sapiente nobis! Expedita possimus incidunt nam laudantium corrupti eaque, eveniet fuga perferendis, enim praesentium vero voluptatibus adipisci, dicta blanditiis aliquid asperiores accusantium. Provident voluptate explicabo necessitatibus eos sequi 
 
    modi non in nesciunt, debitis alias architecto doloremque sed<sup>2<span class="notes right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, et!</span></sup> quam voluptatem aut dolorem officia ipsa eum dicta optio delectus ullam 
 
    aliquam! Dicta rerum praesentium, laudantium suscipit earum, voluptates placeat totam aperiam non atque consequatur cupiditate neque! Reiciendis consectetur quo, alias facilis officia totam illo minus? Vitae distinctio culpa nesciunt voluptate tempore! 
 
    Error enim aperiam odio debitis culpa excepturi, minus molestias inventore amet recusandae<sup>3<span class="notes">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, et!</span></sup> fugit sit quasi qui ipsum. Aperiam quaerat tenetur, 
 
    voluptatibus eaque. Voluptatum veniam, nihil accusamus nesciunt nobis dolore cumque amet asperiores qui, ducimus iusto voluptatibus.

來源

2016-12-01 10:46:37 blonfu

謝謝你的回答。問題是我必須糾正側記重疊時的位置。我正在計算使用JavaScript的新職位。問題在於，如果在CSS中對位置進行硬編碼是一個好主意，以便未啓用JS的用戶可以正確顯示旁註。 – Thorsten

@Thorsten我試圖找到一個純粹的CSS解決方案，也許我誤解了你的問題。否則基於意見的問題在SO中是無關緊要的。如果你的解決方案好或沒有一個客觀的答案。 – blonfu

在CSS的非JavaScript用戶硬編碼元件位置

回答

相關問題