CSS绝对定位_相对定位_绝对定位_应用轮播图案例

作者: 鲁智深 分类: div+css 发布时间: 2013-10-29 00:52

CSS的position定位属性允许自定义元素在HTML页面的位置,但需要先开启元素在HTML页面中的定位。

默认不开启定位

CSS 定位属性提供了四种方式的定位效果:

static: 默认值,表示元素为静态定位。

absolute: 表示元素为绝对定位。

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位

元素开启绝对定位后,与浮动效果类似:

元素会脱离文档流。

元素会呈现块级元素效果。

如果不设置偏移量,元素的位置不会发生变化。

fixed: 表示元素为固定定位。

生成绝对定位的元素,相对于浏览器窗口进行定位

固定定位是一种特殊的绝对定位,固定定位与绝对定位的区别在于:

固定定位始终相对于当前页面进行定位。

绝对定位相对于最近的祖先元素进行定位。

relative: 表示元素为相对定位。

生成相对定位的元素,相对于其正常位置进行定位。

值得注意的是:

开启相对定位的元素,不会脱离文档流。

开启相对定位的元素,是相对于该元素在文档流中的定位效果。

开启相对定位的元素,不会改变元素的性质。(块级元素呈现块级元素效果,内联元素呈现内联元
素效果)

当设置元素的 position 定位属性为非默认值时,CSS 提供了上、右、下和左四个方向的偏移量完成元素的位置设置。

top: 表示当前元素到上边的距离。

right: 表示当前元素到右边的距离。

bottom: 表示当前元素到下边的距离。

left: 表示当前元素到左边的距离。

应用轮播图案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
      <style>
          #slideshow{
            width: 300px;
            height: 100px;
            border: 5px solid red;
            margin: 0 auto;
            position:relative;
            overflow:hidden;
          }
          #slideshow #imgs{
            width:1200px;
            position:absolute;
            left: 0px;

          }
          #slideshow img{
             width: 300px;
             height: 100px;
             float:left;
          }
      </style>
</head>
<body>
      <div id="slideshow">
           <div id="imgs">
               <img src="imgs/01.jpg" alt="1">
               <img src="imgs/02.jpg" alt="2">
               <img src="imgs/03.jpg" alt="3">
               <img src="imgs/04.jpg" alt="4">
           </div>
      </div>
      <!-- 1、先定义一个盒子模型,slideshow定义轮播图大小的盒子
           2、在定义一个imgs盒子是用于容纳图片的盒子
           3、定义总盒子的大小,设置边框
           4、定义图片的大小
           5、对图片容器的div盒子进行绝对定位,利用绝对定位后,其脱离文档流,图片成为内联元素正常水平显示
           6、定义图片容器的宽度,发现图片之间留白,利用float:left浮动居左的属性,去除留白
           7、设置定位元素left
           8、设置隐藏溢出部分,发现无法实现,原因不在一个文档流里面
           9、同样给slideshow盒子加上绝对定位
           10、完美解决问题
           11、但是轮播图不是居中的,设置margin:0 auto 不行?原因position:absolute;是绝对定位,根据父级绝对定位,就是body。
           12、将position:absolute;改成相对定位,不脱离文档流,就居中了,并且图片容器是相对于slideshow盒子绝对定位,也不会出问题。
       -->
</body>
</html>

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

一条评论
  • 山下火

    2013 年 10 月 30 日 13:57

    做互联网的不如做互联网应用赚的多——马云就是例子

发表评论

电子邮件地址不会被公开。 必填项已用*标注