December 2014
Intermediate to advanced
416 pages
5h 33m
Chinese
Content preview from Responsive Web Design 響應式網頁設計學習手冊
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
4. 響應式網站的 CSS
|
93
圖 4-14 第 2 個區塊以相對的方式被定位
如你所見，它在頁面上與其他元素重疊，而不是將其他元素往下推
而挪出空間。在螢幕右邊，沒有空間容納右移 40 像素之後的區塊元
素邊緣，所以有一部分的方框被移出螢幕，消失無蹤。
注意，被定位的元素位在頁面中的其他元素的上面。
要這麼做，你必須把
position
設成
relative
，然後定義定位的改
變，水平、垂直或者兩個方向。
ABSOLUTE
絕對定位是不同的，瀏覽器按照你的要求移動元素，但是不會留空
間給元素原本應該在的位置。
代替相對於元素原本應該在的位置作移動，移動的參考基準變成第
一個其
position
不是
static
的外層元素。
在下面例子裡，三個區塊元素被包含在
<div>
中︰
p.2nd { position: absolute; left: 40px; top: 40px; }
區塊元素 #2 以絕對的方式被定位，因此並沒有留下空間容納它原本
應該在的位置，相反地，它從外層元素
<div>
的左上角向下移動 40
個像素，並且向右移動 40 個像素。
因為沒有留下空間容納它原本應該在的位置，它直接跟其他元素重
疊，如圖 4-15 所示。
94
|
響應式網頁設計學習手冊
圖 4-15 第 2 個區塊元素以絕對的方式被定位 ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.