第9章 定位布局.ppt

小结：定位布局 在 CSS 中进行定位布局时，不能所有的列都定位，要留下最长的一列作 “柱子” 。 定位布局方法有其局限性，应根据实际情况使用。 第 9 章　定位布局 两列定位布局 9.2 定位的概念 9.1 实例分析：泡泡潜水俱乐部 9.4 三列定位布局 9.3 实例分析：泡泡潜水俱乐部 9.4 （4）right-bottom 坐标系 当元素使用 rigth、bottom 属性定位时，采用 right-bottom 坐标系。 position: absolute; right: 50px; bottom: 25px; （0, 0） right bottom 50 25 中国国家大剧院位于北京市中心天安门广场西，人民大会堂西侧，西长安街以南，由国家大剧院主体建筑及南北两侧的水下长廊、地下停车场、人工湖、绿地组成，总占地面积11.89万平方米。 定位坐标系有四种。 坐标系的坐标原点位于参照物元素的 padding 区域外边缘，坐标轴的正值方向指向参照物的内部。 定位元素的定位点位于定位元素的 margin 区域外边缘。 小结：定位坐标系 9.1.3 定位元素的层叠顺序 h1 { position: absolute; left: 100px; top: 50px; } img { position: absolute; left: 150px; top: 70px; } #container { position: relative; } z h1 { position: absolute; left: 100px; top: 50px; } img { position: absolute; left: 150px; top: 70px; } #container { position: relative; } 9.1.3 定位元素的层叠顺序 z-index 属性用于确定定位元素在 Z 轴上的层叠顺序。 一般情况下，z-index 值较大的元素将叠加在 z-index 值较小的元素之上。 9.1.3 定位元素的层叠顺序 z-index: 整数（可为负数） h1 { position: absolute; left: 100px; top: 50px; } img { position: absolute; left: 150px; top: 70px; } #container { position: relative; } 9.1.3 定位元素的层叠顺序 h1 { position: absolute; left: 100px; top: 50px; z-index: 1; } img { position: absolute; left: 150px; top: 70px; } #container { position: relative; } 9.1.3 定位元素的层叠顺序 h1 { position: absolute; left: 100px; top: 50px; z-index: 1; } img { position: absolute; left: 150px; top: 70px; z-index: 2; } #container { position: relative; } p.p1 { z-index: 5; } 9.1.3 定位元素的层叠顺序 h1 { position: absolute; left: 100px; top: 50px; z-index: -1; } img { position: absolute; left: 150px; top: 70px; z-index: -2; } #container { position: relative; } 9.1.3 定位元素的层叠顺序 h1 { position: absolute; left: 100px; top: 50px; z-index: -1; } img { position: absolute; left: 150px; top: 70px; z-index: -2; } #container { position: relative; } body 9.1.3 定位元素的层叠顺序 正值空间 负值空间 h1 { position: absolute; left: 100px; top: 50px; z-index: -1; } img { position: absolute; left: 150px; top: 70px; z-index: -2; } #container { position: relative; z-index: 9; } body 9.