ホームページ > ウェブフロントエンド > htmlチュートリアル > 位置の混乱、解決に役立ちます_html/css_WEB-ITnose

位置の混乱、解決に役立ちます_html/css_WEB-ITnose

WBOY
リリース: 2016-06-21 08:49:00
オリジナル
1056 人が閲覧しました

<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>Document</title>	<style>	*{		margin:0;		padding:0;	}	.parent{		background: red;		position: absolute;		left:60px;		width: 300px;		height: 300px;	}	.childRight{		background: blue;		width: 240px;		position: relative;		right:60px;	}	.child-Right{		background: yellow;		width: 240px;		position: relative;		right:-60px;	}	.childLeft{		background: blue;		width: 240px;		position: relative;		left:60px;	}	.child-Left{		background: yellow;		width: 240px;		position: relative;		left:-60px;	}	</style></head><body>	<div class="parent">parent		<div class="childRight">childRight</div>		<div class="child-Right">child-Right</div>		<div class-"childLeft">childLeft</div>		<div class="child-Left">child-Left</div>	</div>	<div style="width:300px;height:300px;border:1px solid #000">hello</div></body></html>
ログイン後にコピー

親タグは絶対配置に設定されており、子タグは相対配置に設定されています。1. なぜ右: 60px と左: -60px なのか。同じで、3 番目の子タグ (.childLeft) も色が表示されないのはなぜですか?


ディスカッションへの返信 (解決策)

はい、
相対配置の場合、要素は元の位置に基づいてオフセットされ、プラス 60 ピクセルの右オフセットはマイナス 60 ピクセルの左オフセットと等しくなります。


色を表示しないのはなぜですか

childLeft

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート