第八篇 CSS定位

CSS定位

CSS除了内外边距控制元素，还有定位，看到“定位”两个字，同学们应该就能清楚，它能够做什么。

 

在刚学习的时候，我也经常使用定位，来控制元素的位置，但是初学的同学可能会注意不到定位的一些“内涵”！所以会出现一些明显的错误，也不知道怎么去修正它，那么下面我们就来介绍一下，这个定位究竟怎么用才好呢。

 

因为是演示，老师的CSS会采用内联、内嵌，比较方便（同学们以后的项目中，一定要采用外联，高效安全）。

定位属性：position

值：relative(相对定位)、absolute(绝对定位)、fixed(固定定位)

 

我们先来看看相对定位：

 

HTML：

 

<div id="div1">我是定位，相对定位</div>

 

CSS：

 

#div1{
    position: relative;
    background-color:#dedede;
}

 

经过前面的几篇学习，或者了解了WEB前端的HTML和CSS，这里的代码就不再解释了，给背景色就是为了方便看出效果。我们给了div的样式，让它变成“相对定位”了，页面上是没有任何效果的，而要它发生“定位”改变，就要再使用两个属性，left和top，学习过盒子的同学，这两个代码的意思应该是明白的。但是我们这里不是写成"margin-left"或者"padding-left"，更加不是"position-left"，而是单单的给出"left"属性后面再跟值，就可以了。

 

#div1{
    position: relative;
    background-color:#dedede;
    top:20px;
    left:50px;
}

 

刷新页面，能够清楚看到效果，这个div距离页面顶部20px，左侧50px。那么还有一个问题，有多少同学注意到了？页面最低端，出现了一个滚动条！那么是为什么呢？

我们并没有给div设置宽度，它是块级元素，所以默认情况下，它的宽度，是占据整个页面的宽度的。我们设置了它的定位为“相对定位”，它的宽度依旧会是页面宽度，你让它距离左侧(left)50px，他移动过去了，但是宽度依旧不变，所以它这一行可以理解为：当前页面宽度(1920px)+50px(left)，就大于了页面本身宽度，所以下面就出现了滚动条。这就是相对定位。

相对定位还有一个特性，我们再在id为div1下面加一行代码测试一下：

 

<div id="div1">我是定位，相对定位</div>
<div id="div2">我不是定位，没有任何属性，看我位置</div>

 

为了区分，在div1下面添加一个div2，同学在页面上测试代码会发现，它们的位置...是同行的，如果将div1里面的top值20改成50呢，试试效果：

#div1{
    position: relative;
    background-color:#dedede;
    top:50px;
    left:50px;
}

这样的话，div1就在div2的下面去了，而且还能完全的看到div2的所有内容。之前的内容只能看到几个字，后面的都被div1挡住了，这里就关系到了层次。

同学们还发现没有，div1的位置改变了，但是div2依旧是基于它夸了行，没有占用div1原本的位置，也没有因为div1移动了top:50px 而往下面走。div2的位置就等于是，就是基于了div1原本的位置下方跨了一次行。

这里就是“相对定位”的特性，它虽然使用了left和top改变了位置，但是它本身占用的位置是不会改变的，其他的元素也不能占用它本身的位置。

我们可以再来试一下相对定位，这个位置是不是真的，别的元素不会占用，那么我们给它设置一个高：

#div1{
    height: 200px;
}

在div1里加一个高，那么效果就会发生改变，div2也会跟着往下面走，是因为，它没有“移动”，它的div元素是在div1下面的，就会一直基于div1跨一次行，跟着老师做到这里，有同学疑问，div2的内容又被压着了，怎么看到全部的内容呢？“position”定位，它还有一个属性：z-index 层次，它的值为数字，可以为负数，不需要单位：

 

#div1{
    z-index: -1;
}

 

给div1设置了层次为负1，在页面上，不设置z-index的情况下，所有的元素z-index都可以理解为默认0，而设置了postion的会比没有设置position的高，所以div1才会压着div2，而现在div1层次设置成了负数，div2就可以压着它了，其他元素也会压着，这就是层次，立体模型一样。再说一次，只有设置了position的元素，才可以设置z-index，否则无效哦。

 

绝对定位：

 

这个定位好用，但是不推荐用，老师学习的时候，几乎全部用它，但那是错误的！！！

绝对定位，它的“内涵”，会使这个元素脱离文本，比如看看这个代码：

HTML：

 

<div id="div3">我是绝对定位</div>

 

CSS：

 

#div3{
    position: absolute;
}

 

我们能够发现，它不会改变对吧，但是我们写定位，其实也就是希望它的位置发生改变，那么我们再加两行代码：

 

#div3{
    top:10px;
    left: 10px;
}

 

在div3里面，我们加上这两行代码，让它发生位移，同学们会看到，它怎么跑到div1和div2上面去了呢？如果说是相对定位，或者说用内外边距，它也应该是在div1和div2下面距离10px，但是这里，它却在最顶端上了。

我们刚刚说到，绝对定位，它会脱离文本，可以理解为，它不在被其他元素影响，而成为一个独立的，只会基于页面最顶端和左侧发生位移。

看到这里，有同学肯定高兴，那用绝对定位多好，全盘用它来改变位置。确实，老师曾经就这样用过，但是老师问问同学们，你的分辨率宽度固定1920px，你让1个10个N个元素成为绝对定位来位移，那么这只是你的电脑而已，那么如果别人的电脑分辨率只有1024px呢？你某一个元素位移1500px，那么人家1024px的电脑看得到吗？有同学说，会跟相对定位一样，下方出现滚动条。让我们来试试：

 

#div3{
    left: 2000px;
}

 

将上面的代码，left改成2000px吧，这样测试的更直接，因为同学们基本上用的都是小于等于1920px的分辨率吧！

效果会怎么样呢？确实，出现了滚动条，我们往右侧拉，会看到什么呢？因为它超过了浏览器最大分辨率，所以它的内容变成了垂直显示了。

那么出现这种情况，同学们一定要觉得很严重，因为你想啊，人家的分辨率若比你的小，那内容不都变样了？还有我们再在div3下面加一个div4试试，先将div3的top和left都设置成0px，设置成0的话，它们就会跑到基于页面左上角去了。不设置的话，就会回到原本的位置上去。

我们在div3下面加一个div4：

 

<div id="div4">普通的div，什么都不设置</div>

 

同学能看到，div3确确实实跑到了页面的左上角去了对吧，而div4也在div2下面！为什么是在div2下面呢？因为div3设置成了绝对定位，它原本的位置，已经消失了，所以div4能够占用它的位置，这里就能区分相对和绝对的一个区别。然后我们再将div3的left和top取消，记住是取消掉哦，就是删除它这两个属性。

删除后，大家能看到，它回到了它原本的位置(div2的下面)，但是问题来了，它和div4重合了。是因为div3成了绝对定位，div4就直接顶替了它的位置，即使div3回来了，它也只是漂浮在页面上的，不会被其他元素影响，也不会影响别的元素。同学们觉得，这样方便管理吗？我们二次开发的时候，难道别人也要跟着你一样，全盘用绝对定位吗？还有之后的“响应式布局”，不同分辨率不同效果，对吗。

那绝对定位不推荐用，要它干嘛？老师也觉得，但是它还有一个非常重要的用处，可以使它不基于浏览器左上角，而是基于它的“父亲元素”，什么是父亲元素呢？又怎么让绝对定位有父亲元素呢，看下面的代码：

HTML：

 

<div id="div5">
    我是父亲元素，我还是相对定位
    <div id="div5-1">
        我是绝对定位，我是div5的下一代
    </div>
</div>

 

CSS：

 

#div5{
    position: relative;
    width: 500px;
    height: 300px;
    background-color: aqua;
}
#div5-1{
    position: absolute;
    left: 20px;
    top:5px;
}

 

我们去页面测试，同学们能看到，div5-1 这个元素div块，它没有跑到离开div5对吧，更没有跑到页面左上角，是因为它的父亲元素影响到了它，而它的父亲元素，必须设置成相对定位，才能影响它。如果div5不是相对定位，或者没有设置定位，那么div5-1会直接不承认div5是它的老爸，直接离家出走，跟着浏览器的左上角跑，真的哦。

这里的效果，同学们看到没有，老师给div5-1设置的top只有5px，它还跟父亲元素的内容重合了，是因为什么呢？它确实是基于它父亲发生了位移，但是它基于的是，它父亲的左上角，我们可以再加一行代码和改动一下left、top试试：

 

#div5-1{
    position: absolute;
    left: 0px;
    top:0px;
    background-color: red;
}

 

给div5-1加一个背景色，容易区分嘛，然后top和left都改成0，可以看出效果，它确确实实是基于父亲元素的左上角对吧！一点问题都没。

这中绝对定位和相对定位搭配的方法，以后也会常用到的。

 

固定定位：

 

这个固定定位也就经常用到了！同学们看到，固定，它是固定的。经常用到哪里呢？想是导航栏，你页面不管这么上下滑动，左右滑动，它都不会改变位置，永远在哪里，所以说，它更多用来做导航栏呢！

 

我们写一段代码玩玩：

HTML：

 

<div id="div6">我是固定定位</div>
<div style="height:2000px;我高度2000px，是为了测试固定定位</div>

 

CSS：

 

#div6{
    position: fixed;
}

 

仅仅这样的代码，大家能够滑动一下试试，这个div6的内容，是不是你上下滑动，它永远都在那个位置，而且它和绝对定位是一样的，脱离了文本，不和其他元素相互产生影响。我们给它加一个top和left，看看它是否基于页面的左上角呢！

 

#div6{
    position: fixed;
    top: 0;
    left: 0;
}

 

测试的同学能够看到很明显的效果，它确实也是基于页面的左上角的！和绝对定位一样。有同学发问，既然是一样，那么它是不是也能够设置绝对定位作为父亲，答案是：不会，它不会承认别人是它的父亲，一样的跑到页面左上角去，同学可以自己测试一下，加深印象！

 

三个定位都演示完了，还有不懂的同学，请在下方发问。