CSS 驟咲ｽｮ髢｢騾｣ｼ嗔osition螻樊ｧ
讎りｦ
| 蛟､ | 讖溯ｽ |
|---|---|
| static | 蝓ｺ貅冶ｨｭ螳夂┌縺(隕丞ｮ) |
| absolute | 邨ｶ蟇ｾ菴咲ｽｮ驟咲ｽｮ |
| relative | 逶ｸ蟇ｾ菴咲ｽｮ驟咲ｽｮ |
| fixed | 邨ｶ蟇ｾ菴咲ｽｮ驟咲ｽｮ縲ゅせ繧ｯ繝ｭ繝ｼ繝ｫ縺励※繧ゆｽ咲ｽｮ縺悟崋螳 |
potision: absolute;
邨ｶ蟇ｾ菴咲ｽｮ驟咲ｽｮ
隕ｪ繝懊ャ繧ｯ繧ｹ ｼ static莉･螟(absolute,relative,fixed)
蟄舌懊ャ繧ｯ繧ｹ ｼ absolute
竍定ｦｪ繝懊ャ繧ｯ繧ｹ縺九ｉ縺ｮ霍晞屬繧稚op,left,right,bottom縺ｧ謖螳壹
隕ｪ繝懊ャ繧ｯ繧ｹ ｼ static
蟄舌懊ャ繧ｯ繧ｹ ｼ absolute
竍<body>縺九ｉ縺ｮ霍晞屬繧稚op,left,right,bottom縺ｧ謖螳壹
蜈ｱ騾壹せ繧ｿ繧､繝ｫ
<style type="text/css" >
縲縲.parent {
縲縲縲縲width: 100px;
縲縲縲縲height: 100px;
縲縲縲縲border: 1px solid #888;
縲縲}
縲縲.child {
縲縲縲縲width: 50px;
縲縲縲縲height: 50px;
縲縲縲縲border: 1px solid gray;
縲縲}
</style>
竊灘渕貅(paernt1縺ｮtop)
<div id="parent1" class="parent">
縲縲parent1
縲縲<div id="child1" class="child">
縲縲縲縲child1
縲縲</div>
</div>
<style type="text/css" >
縲縲#parent1 {
縲縲縲縲position: relative;
縲縲}
縲縲#child1 {
縲縲縲縲position: absolute;
縲縲縲縲top: 80px;
縲縲縲縲left: 20px;
縲縲縲縲parent1縺ｮtop,left縺九ｉ縺ｮ霍晞屬繧呈欠螳
縲縲}
</style>
竊大渕貅(parent2縺ｮbottom)
<div id="parent2" class="parent">
縲縲parent2
縲縲<div id="child2" class="child">
縲縲縲縲child2
縲縲</div>
</div>
<style type="text/css" >
縲縲#parent2 {
縲縲縲縲position: relative;
縲縲}
縲縲#child2 {
縲縲縲縲position: absolute;
縲縲縲縲bottom: 100px;
縲縲縲縲parent2縺ｮbottom縺九ｉ縺ｮ霍晞屬繧呈欠螳(-100px荳翫↓驟咲ｽｮ縺輔ｌ繧)
縲縲}
</style>
縺薙％縺ｫchild4縲…hild4縺ｮ隕ｪ繧ｿ繧ｰ繧定ｨ倩ｿｰ
<div style="position: relative;">
縲縲縲縲縲竊蝉ｸ九ｮ譁ｹ縺ｧ驟咲ｽｮ縺励◆繝懊ャ繧ｯ繧ｹ(child4)縲
(荳企Κ蜿らｧ)
<div id="parent3" class="parent">
縲縲parent3
縲縲<div id="child3" class="child">
縲縲縲縲child3
縲縲</div>
</div>
<style type="text/css" >
縲縲#parent3 {
縲縲縲縲position: static;
縲縲}
縲縲#child3 {
縲縲縲縲position: absolute;
縲縲縲縲top: 0px;
縲縲縲縲隕ｪ繝懊ャ繧ｯ繧ｹ(縺ｪ縺代ｌ縺ｰ<body>)縺ｮtop縺九ｉ縺ｮ霍晞屬繧呈欠螳
縲縲縲縲position: static縺ｮ隕ｪ縺ｯ辟｡隕悶＆繧後ｋｼ
縲縲}
</style>
隕ｪ繧呈欠螳壹＠縺ｪ縺蝣ｴ蜷
(荳企Κ蜿らｧ)
<div id="child4" class="child">
縲縲child4
</div>
<style type="text/css" >
縲縲#child4 {
縲縲縲縲position: absolute;
縲縲縲縲top: 80px;
縲縲縲縲隕ｪ繧呈欠螳壹＠縺ｪ縺蝣ｴ蜷茨ｼ夊ｦｪｼ<body>
縲縲縲縲隕ｪ繝懊ャ繧ｯ繧ｹ(縺ｪ縺代ｌ縺ｰ<body>)縺ｮtop縺九ｉ縺ｮ霍晞屬繧呈欠螳壹☆繧九ｮ縺ｨ蜷後§
縲縲}
</style>
potision: relative;
逶ｸ蟇ｾ菴咲ｽｮ驟咲ｽｮ
隕ｪ繝懊ャ繧ｯ繧ｹ ｼ static莉･螟(absolute,relative,fixed)
蟄舌懊ャ繧ｯ繧ｹ ｼ relative
竍定ｦｪ繝懊ャ繧ｯ繧ｹ縺九ｉ縺ｮ霍晞屬繧稚op,left,right,bottom縺ｧ謖螳壹
縲蟄舌懊ャ繧ｯ繧ｹ縺ｮ蜈繧ｹ繝壹ｼ繧ｹ縺ｯ谿九ｋ
aaa
aaa
<div id="parent5" class="parent">
縲縲parent5
縲縲<div id="child5" class="child">
縲縲縲縲child5
縲縲</div>
縲縲aaa<br/>
縲縲aaa<br/>
</div>
<style type="text/css" >
縲縲#parent5 {
縲縲縲縲position: relative;
縲縲}
縲縲#child5 {
縲縲縲縲position: relative;
縲縲縲縲top: 0px;
縲縲縲縲left: 70px;
縲縲縲縲parent5縺ｨ縺縺譁蟄励ｮ荳矩Κ縺九ｉ縺ｮ霍晞屬繧呈欠螳
縲縲}
</style>
aaa
aaa
<div id="parent6" class="parent">
縲縲parent6
縲縲<div id="child6" class="child">
縲縲縲縲child6
縲縲</div>
縲縲aaa<br/>
縲縲aaa<br/>
</div>
<style type="text/css" >
縲縲#parent6 {
縲縲縲縲position: relative;
縲縲}
縲縲#child6 {
縲縲縲縲position: relative;
縲縲縲縲top: 50px;
縲縲縲縲left: 70px;
縲縲縲縲parent6縺ｨ縺縺譁蟄励ｮ荳矩Κ縺九ｉ縺ｮ霍晞屬繧呈欠螳
縲縲縲縲蟇ｾ雎｡(child6)縺檎ｧｻ蜍輔＠縺ｦ繧ゅ∝縺ｮ菴咲ｽｮ縺ｮ繝懊ャ繧ｯ繧ｹ蛻繧ｹ繝壹ｼ繧ｹ縺檎ｩｺ縺
縲縲}
</style>
aaa
aaa
<div id="parent7" class="parent">
縲縲parent7
縲縲<div id="child7" class="child">
縲縲縲縲child7-1
縲縲</div>
縲縲<div id="child7" class="child">
縲縲縲縲child7-2
縲縲</div>
縲縲aaa<br/>
縲縲aaa<br/>
</div>
<style type="text/css" >
縲縲#parent7 {
縲縲縲縲position: relative;
縲縲}
縲縲#child7-1 {
縲縲縲縲position: relative;
縲縲縲縲top: 50px;
縲縲縲縲left: 70px;
縲縲}
縲縲#child7-2 {
縲縲縲縲position: relative;
縲縲縲縲top: 30px;
縲縲縲縲left: 130px;
縲縲}
</style>
potision: fixed
邨ｶ蟇ｾ菴咲ｽｮ驟咲ｽｮ縲ゅせ繧ｯ繝ｭ繝ｼ繝ｫ縺励※繧ゆｽ咲ｽｮ縺悟崋螳
竍定ｦｪ繝懊ャ繧ｯ繧ｹ(<body>)縺九ｉ縺ｮ霍晞屬繧稚op,left,right,bottom縺ｧ謖螳壹
繝壹ｼ繧ｸ荳企Κ蜿らｧ
<div id="child9" class="child">
縲縲child9
</div>
<style type="text/css" >
縲縲#child9 {
縲縲縲縲position: fixed;
縲縲縲縲top: 30px;
縲縲縲縲right: 10px;
縲縲}
</style>
Follow me!
