CSS position: fixed

position 屬性指定了元素的定位類型

<pre> <pre> <b>position</b> 改變物件的位置 sets how an element is positioned in a document position: static | relative | fixed | absolute | sticky static:靜態定位 relative:相對定位 fixed:固定定位 absolute:絕對定位 sticky:黏貼定位 </pre> <style> input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<div id="MD"> <div id="div1" >position<br>fixed <br> top:10px<br> left:10px</div> <div id="div2" >position<br>fixed <br> top:10px right:10px</div> <div id="div3" >position<br>fixed <br> bottom:10px<br> left:150px </div> <div id="div4" >position<br>fixed <br> bottom:10px<br> right:350px </div> <pre> <<c>style> #div1 {position:fixed ; top:10px ; left:10px; } #div2 {position:fixed; top:10px ; right:10px; } #div3 {position:fixed ; bottom:10px ; left:10px; } #div4 {position:absolute ; bottom:10px ; right:10px; } <<c>/style></pre> </div> <style> #MD{ width:100%;height:99%; display:flex ; justify-content:center; align-items: center;} #div1,#div2,#div3,#div4,#div5 { width:100px ; height:100px; background: gray; color:white } #div1 {position:fixed ; top:10px ; left:10px; } #div2 {position:fixed; top:10px ; right:10px; } #div3 {position:fixed ; bottom:10px ; left:10px; } #div4 {position:absolute ; bottom:10px ; right:10px; } </style> <style> input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<!DOCTYPE html> <html> <head> <style> .outerDiv {float:left; position: relative; width: 300px ; height: 400px ; border: 3px solid #73AD21; } .innerDiv{ position: absolute ; bottom: 10px; right: 10px; width: 100px; height: 100px; border: 3px solid #73AD21; } </style> <div class="outerDiv">outerDiv <div class="innerDiv">innerDiv</div> </div> <pre> <<c>div class="outerDiv">outerDiv <<c>div class="innerDiv"> innerDiv<<c>/div> <<c>/div> <<c>style> .outerDiv { <r>position: relative;</r> } .innerDiv {<r> position: absolute; bottom: 10px; right: 10px; </r>} <<c>/style> <style> input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style> </pre>

00

<!DOCTYPE html> <html> <head> <style> .outerDiv {float:left; position: relative; width: 300px ; height: 400px ; border: 3px solid #73AD21; } .innerDiv{ position: sticky; width: 100px; height: 100px; border: 3px solid #73AD21; } </style> <div class="outerDiv">outerDiv <div class="innerDiv">innerDiv</div> </div> <pre> <<c>div class="outerDiv">outerDiv <<c>div class="innerDiv"> innerDiv<<c>/div> <<c>/div> <<c>style> .outerDiv { <r>position: relative ;</r> } .innerDiv { <r>position: sticky;</r> } <<c>/style> <style> input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style> </pre>

00

Edit

#html #網頁格式 #script #style #div #script 延遲執行 setTimeou #script setTimeou #script clearTimeout