Learn Javascript
3_position

div left top

<div>
   a 
   <div> 因為div屬於block,而前面的a是雖然沒有HTML標籤,
     但仍然是文件中的一個可見HTML部分。因此會導致這個div跑到a下方。
     可以加上span試試看。
   </div>
</div>

參照上面的講法,把下面練習HTML中的 inner text 如a,b c 去掉,觀察結果。

hint: 原點都是左上。

原始碼(b12 div ex2.html) 
<!DOCTYPE html>
<HTML lang="en-US">

<HEAD>
	<TITLE> Divs in HTML with style </TITLE>
	<style>
		.container {
			width: 100%;
			height: 100%;

		}

		.box {
			width: 100%;
			height: 34%;
			background-color: Blue;
		}
	</style>
</HEAD>
<BODY>
	<div class="container">
		<div id="box1" class="box" style="background-color:Lime;">
			a
		</div>
		<div id="box2" class="box" style="background-color:Gray;">
			b
		</div>
		<div id="box3" class="box" style="background-color:Aqua;">
			c <br />
			<textarea cols="70" rows="15" readonly="readonly">
		test only


				</textarea>
		</div>
	</div>
</BODY>
</HTML>

div position

參考

材料

期望成品

實驗材料

😒實作前的測試

  1. 紅色的position:relative指定偏離原來的位置top:30px(原本應該連在藍色後面,可以修改試試)

    原始碼(staticfix.html) 
    <!DOCTYPE html>
<html>

<head>
<style>
  p{
    margin : 0px;
  }
  .main {
  background-color: grey;
  width: 200px;
  height: 100px;
  }

  .relative {
  background-color: red;
  position: relative;
  top: 30px;
  color: #FFF;
  }

  .static {
  background-color: blue;
  top: 30px; /*在static 中 無效*/
  }
  </style>
</head>

<body>
  <div class='main'>

    <div id="box1">
      <p class="static">static</p>
      <p class="relative">relative</p>
    </div>
</body>

</html>

  2. position:absolute 會以親代層中有relative|absolute的左上角為原點,否則會到body的左上角為準。

  3. 測試absolute(想要將小人圖,放在紅線的左上角位置),但是參看HTML結果,不是我們預期的那樣。

    • 練習(在下面的box1 樣式中填入下面的程式碼) 
      #box1 {
position:relative;
top:20px;
left:-40px;
}
    • 練習 
      #box1 {
position:absolute;
top:0;
right:0;
width:200px;
}
      原始碼(staticfix2.html) 
      <!DOCTYPE html>
<html>

<head>
  <style>
    p {
      width: 80%;
    }

    .main {
      background-color: grey;
      width: 100%;
      
    }
 
    img.absolute {
      position: absolute;
      top: 0;
      left: 0;
    }

    img {
      width: 100px;
      height: 80px;
    }
    #box1{
      position:relative; /* 🐞去掉comments 試試 */
      border:solid 1px red;
    }
  </style>
</head>

<body>
  <div class='main'>
    <p> -------------paragraph in main div------------------</p>
    <div id="box1">
      <p class="fixed">fixed</p> <!--😒參考上面的樣式,沒有這個類別,只是下個練習對照用-->
      <p>沒有指定positioin屬性(往前移取代前一段落的位置)</p> <!-- 😒對照用💡往前移 -->
      <img class="absolute" src="img/littleman.jpg"> <!--⛳主要看這行-->
      <p> paragraph between image</p>
      <img class="fixed" src="img/littleman.jpg"> <!--😒和下個練習對照用-->
    </div>
  </div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dolor sed turpis consequat iaculis ut sit amet
    dui. Maecenas consequat maximus bibendum. Proin maximus, metus condimentum auctor tempus, leo enim laoreet libero,
    faucibus interdum libero lorem id tortor.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dolor sed turpis consequat iaculis ut sit amet
    dui. Maecenas consequat maximus bibendum. Proin maximus, metus condimentum auctor tempus, leo enim laoreet libero,
    faucibus interdum libero lorem id tortor.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dolor sed turpis consequat iaculis ut sit amet
    dui. Maecenas consequat maximus bibendum. Proin maximus, metus condimentum auctor tempus, leo enim laoreet libero,
    faucibus interdum libero lorem id tortor.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dolor sed turpis consequat iaculis ut sit amet
    dui. Maecenas consequat maximus bibendum. Proin maximus, metus condimentum auctor tempus, leo enim laoreet libero,
    faucibus interdum libero lorem id tortor.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dolor sed turpis consequat iaculis ut sit amet
    dui. Maecenas consequat maximus bibendum. Proin maximus, metus condimentum auctor tempus, leo enim laoreet libero,
    faucibus interdum libero lorem id tortor.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dolor sed turpis consequat iaculis ut sit amet
    dui. Maecenas consequat maximus bibendum. Proin maximus, metus condimentum auctor tempus, leo enim laoreet libero,
    faucibus interdum libero lorem id tortor.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dolor sed turpis consequat iaculis ut sit amet
    dui. Maecenas consequat maximus bibendum. Proin maximus, metus condimentum auctor tempus, leo enim laoreet libero,
    faucibus interdum libero lorem id tortor.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dolor sed turpis consequat iaculis ut sit amet
    dui. Maecenas consequat maximus bibendum. Proin maximus, metus condimentum auctor tempus, leo enim laoreet libero,
    faucibus interdum libero lorem id tortor.
  </p>
</body>

</html>

  4. fix 不同於absolute 可以針對上一層的div,fix 是針對可見高(vh),可見寬(vw)

前 後