HTML5でトップとは何を意味しますか-フロントエンドQ&A-php.cn

HTML5でトップとは何を意味しますか

WBOY

リリース： 2021-12-23 16:57:20

オリジナル

9583 人が閲覧しました

HTML5 の

top は、「上」および「上からの距離」を意味します。top 属性は、要素の上端を指定するために使用されます。また、要素の上部外側境界間のオフセットを設定するためにも使用できます。配置された要素とその要素を含むブロックの上部境界。シフトの場合、構文は「」または「Object.style.top=value」です。 <element style="top:值">

HTML5でトップとは何を意味しますか

#このチュートリアルの動作環境: Windows 10 システム、HTML5 バージョン、Dell G3 コンピューター。

#html5 における top の意味

top 属性は要素の上端を指定します。このプロパティは、位置決めされた要素の上マージン境界とその要素を含むブロックの上境界の間のオフセットを定義します。

注: 「position」属性の値が「static」の場合、「top」属性を設定しても効果はありません。

静的要素の場合は自動、長さの値の場合は対応する絶対長さ、パーセント値の場合は指定された値、それ以外の場合は自動です。

相対定義要素の場合、上と下が両方とも auto の場合、計算値は両方とも 0 になります。一方が auto の場合は、もう一方の反対の値が取られます。どちらも auto でない場合は、下が計算されます。 top の値の逆数になります。

構文は次のとおりです:

<element style="top:值">

ログイン後にコピー

top 属性は、位置決めされた要素の上マージン境界と、その要素を含むブロックの上境界との間のオフセットを設定します。

構文は次のとおりです:

Object.style.top=auto|%|length

ログイン後にコピー

例は次のとおりです:

<html>
<head>
<style type="text/css">
input
{
position:absolute;
}
</style>
<script type="text/javascript">
function setTopEdge()
{
document.getElementById("b1").style.top="100px";
}
</script>
</head>
<body>
<input type="button" id="b1" onclick="setTopEdge()"
value="Set top edge to 100 px" />
</body>
</html>

ログイン後にコピー

出力結果:

HTML5でトップとは何を意味しますか # #推奨チュートリアル: 「