网站设计与开发课程 第9章 网页的定位布局 课件.ppt

（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.1.3 定位元素的层叠顺序 h1 { position: absolute; left: 100px; top: 50px; z-index: -1; } img { position: absolute; left: 150px; top: 70px; z-index: -2; } #container { positi