✍ 📁 🙈 🙉 🙊 : CSS position fixed

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

<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>

#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>

<!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>

</pre>

Edit

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

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單