css定位

一。css的定位。

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

普通流：就是一般的元素的位置。

浮动：就是通过 float 这个属性进行设置。

绝对定位： 主要就是 position 这个属性。

二。float 属性的说明。

float属性主要是 left / right / none /inherit 这四个值。分别代表：浮动到左边，浮动到右边，不浮动，继承父元素的浮动。

一般浮动后需要清除上面的浮动，这样才会不影响下面的元素。浮动的清除 clear 属性。

clear：both（清除左右浮动），left（清除左浮动），right（清除右浮动），inherit（继承父元素），none。

三。绝对定位。主要就是同position的值进行处理的。

position：static ，relative ，absolute ，fixed。

static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed：一般用于固定在屏幕的某个地方。

上面的四个属性。经常需要用到后面的三个属性。只要有某个模块需要固定在屏幕的一个地方就一定用fixed。例如一个下拉导航，你就要用到relative，absolute。用relative固定导航，用absolute进行绝对定位导航下拉的值。

这就是一个下拉菜单。代码如下：

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;                                        /* 固定菜单 */
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;                                       /* 固定下拉的值 */
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}