以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

宣告圖層

使用一個圖層前,您必需宣告位置是相對於流覽器視窗或絕對位置:

#layer1 { position: absolute }

再來加入其他圖層的屬性 (屬性參閱 CSS 屬性一覽表 for available properties and values). For instance, the following code places <H1> text inside a box that's 150 pixels from the top of the page and is 200 pixels wide by 200 pixels high:

#layer1 { position: absolute; top: 150px; width: 200px; height: 200px } 

當然,您可能不希望所有 <H1> 標籤都顯示在同樣的位置。先前我們提到的 應用在文件中 及 <DIV> 和 <SPAN> 標籤就變的非常有用。 例如: 下列程式碼放在 <DIV> 標籤中,以絕對位置顯示在本頁中

<DIV style="position: absolute; top: 150px; width: 200px; height: 200px; background-color: red">紅色背景文字,範圍是 200x200 點,距離現在的視窗上邊界有150點 </DIV>

絕對位置由流覽器視窗的邊界開始算, 當使用相對位置放置文字或圖案在該文件上時,整份文件若有異動位置時,您可以不必 再去一個一個物件指定其位置。

下面的例子, 第一行文字就是正在顯示在網頁中的文字 第二行放在 <SPAN> 名為 offset 的圖層下, 會在第一行文字下 50 pixels 右 25 pixels 處顯示 (屬性 top 和 left 用來指定邊界)

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
#offset
       {
        position: relative; 
        top: 50px;
        left: 25px
        }
-->
</STYLE>
</HEAD>

<BODY> 這段文字正常的顯示在本頁中, 下一行文字則會由本行的尾端繼續接下去  

<SPAN id="offset">接的位置是距離上一行 50 點向右移 25 點</SPAN> 
</BODY> 
</HTML>

上一頁:CSS中圖層的定義 下一頁:圖層的重疊效果

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

How much can you grow from stretching?   2017/8/4 上午 10:49:00

I've been exploring for a little for any high
quality articles or weblog posts on this sort of house .
Exploring in Yahoo I eventually stumbled upon this web site.
Studying this info So i'm satisfied to express that I've an incredibly just right uncanny feeling I came upon exactly what I needed.
I most undoubtedly will make certain to don?t forget
this site and provides it a look regularly.

impartialebb5971.snack.ws   2017/7/31 上午 12:44:00

Heya i'm for the first time here. I came across this board and I find It
really useful & it helped me out much. I hope to give something back and aid others like you aided me.

Can you lose weight by doing yoga?   2017/7/29 上午 01:53:00

Good post. I learn something totally new and challenging on sites I stumbleupon on a daily basis.
It's always helpful to read through content from other authors
and use a little something from other sites.

What is distraction osteogenesis?   2017/7/27 下午 11:43:00

Howdy would you mind stating which blog platform you're using?
I'm going to start my own blog in the near future but I'm having a
hard time deciding between BlogEngine/Wordpress/B2evolution and Drupal.
The reason I ask is because your design and style seems different then most blogs
and I'm looking for something completely unique.
P.S Sorry for being off-topic but I had to ask!

Can you stretch to get taller?   2017/7/22 下午 05:41:00

Terrific work! This is the type of information that should be shared across the internet.
Disgrace on Google for now not positioning this post
upper! Come on over and seek advice from my site .
Thank you =)

foot pain epsom salt   2017/7/2 下午 01:46:00

I create a comment each time I especially enjoy a post on a site or if I have
something to valuable to contribute to the discussion. Usually it's caused
by the fire displayed in the post I looked at. And
on this article 【卜維丰】宣告圖層.
I was moved enough to post a thought ;-) I do have a couple of questions for you if you usually do not mind.
Is it just me or do some of these remarks look like left by brain dead people?
:-P And, if you are posting at additional online sites, I would like to
follow anything fresh you have to post. Would you make a list
every one of all your social pages like your linkedin profile, Facebook page or twitter feed?

foot pain essential oil   2017/7/2 下午 12:53:00

My brother recommended I would possibly like this blog.
He used to be totally right. This submit actually
made my day. You can not imagine simply how so much time I had spent for
this info! Thanks!

foot pain heel   2017/6/21 下午 09:42:00

Inspiring quest there. What happened after? Thanks!

   2017/6/11 上午 05:30:00

I was able to find good information from your articles.

manicure   2017/5/3 下午 09:24:00

Thanks a lot for sharing this with all of us you actually realize what you are
speaking approximately! Bookmarked. Please also talk over with
my site =). We may have a link exchange agreement between us

bruce   2008/8/5 上午 11:42:00

[補充]:我找到了,在你的文章 [解決 Flash 蓋住彈出目錄的方法],謝謝!!

bruce   2008/8/5 上午 11:35:00

您好,依據上述的確可以設計出圖層效果。我想請問一下,此種圖層是否可以做出 table(在頂層顯示) 和 flash(在底層顯示)的效果!

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: