CSS 驟咲スョ髢「騾」シ嗔osition螻樊ァ

讎りヲ

蛟、 讖溯ス
static 蝓コ貅冶ィュ螳夂┌縺(隕丞ョ)
absolute 邨カ蟇セ菴咲スョ驟咲スョ
relative 逶ク蟇セ菴咲スョ驟咲スョ
fixed 邨カ蟇セ菴咲スョ驟咲スョ縲ゅせ繧ッ繝ュ繝シ繝ォ縺励※繧ゆス咲スョ縺悟崋螳

potision: absolute;

邨カ蟇セ菴咲スョ驟咲スョ
隕ェ繝懊ャ繧ッ繧ケ シ static莉・螟(absolute,relative,fixed)
蟄舌懊ャ繧ッ繧ケ シ absolute
竍定ヲェ繝懊ャ繧ッ繧ケ縺九i縺ョ霍晞屬繧稚op,left,right,bottom縺ァ謖螳壹
隕ェ繝懊ャ繧ッ繧ケ シ static
蟄舌懊ャ繧ッ繧ケ シ absolute
竍<body>縺九i縺ョ霍晞屬繧稚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)

parent1

child1

<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縺九i縺ョ霍晞屬繧呈欠螳
縲縲}
</style>

parent2

child2

竊大渕貅(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縺九i縺ョ霍晞屬繧呈欠螳(-100px荳翫↓驟咲スョ縺輔l繧)
縲縲}
</style>

縺薙%縺ォchild4縲…hild4縺ョ隕ェ繧ソ繧ー繧定ィ倩ソー
<div style="position: relative;">

縲縲縲縲縲竊蝉ク九ョ譁ケ縺ァ驟咲スョ縺励◆繝懊ャ繧ッ繧ケ(child3)縲
縲縲縲縲縲竊蝉ク九ョ譁ケ縺ァ驟咲スョ縺励◆繝懊ャ繧ッ繧ケ(child4)縲

(荳企Κ蜿らァ)

parent3

child3

<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;
縲縲縲縲隕ェ繝懊ャ繧ッ繧ケ(縺ェ縺代l縺ー<body>)縺ョtop縺九i縺ョ霍晞屬繧呈欠螳
縲縲縲縲position: static縺ョ隕ェ縺ッ辟。隕悶&繧後kシ
縲縲}
</style>

隕ェ繧呈欠螳壹@縺ェ縺蝣エ蜷
(荳企Κ蜿らァ)

child4

<div id="child4" class="child">
縲縲child4
</div>
<style type="text/css" >
縲縲#child4 {
縲縲縲縲position: absolute;
縲縲縲縲top: 80px;
縲縲縲縲隕ェ繧呈欠螳壹@縺ェ縺蝣エ蜷茨シ夊ヲェシ<body>
縲縲縲縲隕ェ繝懊ャ繧ッ繧ケ(縺ェ縺代l縺ー<body>)縺ョtop縺九i縺ョ霍晞屬繧呈欠螳壹☆繧九ョ縺ィ蜷後§
縲縲}
</style>

potision: relative;

逶ク蟇セ菴咲スョ驟咲スョ
隕ェ繝懊ャ繧ッ繧ケ シ static莉・螟(absolute,relative,fixed)
蟄舌懊ャ繧ッ繧ケ シ relative
竍定ヲェ繝懊ャ繧ッ繧ケ縺九i縺ョ霍晞屬繧稚op,left,right,bottom縺ァ謖螳壹
縲蟄舌懊ャ繧ッ繧ケ縺ョ蜈繧ケ繝壹シ繧ケ縺ッ谿九k

parent5

child5

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縺ィ縺縺譁蟄励ョ荳矩Κ縺九i縺ョ霍晞屬繧呈欠螳
縲縲}
</style>

parent6

child6
蜈菴咲スョ

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縺ィ縺縺譁蟄励ョ荳矩Κ縺九i縺ョ霍晞屬繧呈欠螳
縲縲縲縲蟇セ雎。(child6)縺檎ァサ蜍輔@縺ヲ繧ゅ∝縺ョ菴咲スョ縺ョ繝懊ャ繧ッ繧ケ蛻繧ケ繝壹シ繧ケ縺檎ゥコ縺
縲縲}
</style>

parent7

child7-1
child7-2
蜈菴咲スョ
蜈菴咲スョ

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>)縺九i縺ョ霍晞屬繧稚op,left,right,bottom縺ァ謖螳壹
繝壹シ繧ク荳企Κ蜿らァ

child9

<div id="child9" class="child">
縲縲child9
</div>
<style type="text/css" >
縲縲#child9 {
縲縲縲縲position: fixed;
縲縲縲縲top: 30px;
縲縲縲縲right: 10px;
縲縲}
</style>

Follow me!