CSS浮动与定位

1. 浮动
通过css定义float（浮动）让div样式层块，向左或向右（靠）浮动。
Float常跟属性值left、right、none
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动

float语法：
float : none | left |right
参数值：
none : 　对象不浮动
left : 　对象浮在左边
right : 　对象浮在右边

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

2. 定位
position 属性
position 属性规定应用于元素的定位方法的类型。
有五个不同的位置值：
static：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

div.static {
    position: static;
    border: 3px solid #73AD21;
}

relative：相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。

h2.pos_left
{
    position:relative;
    left:-20px;
}
h2.pos_right
{
    position:relative;
    left:20px;
}

fixed：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：

p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}

absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于；absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。

h2
{
    position:absolute;
    left:100px;
    top:150px;
}

sticky：sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

CSS浮动与定位

CSS浮动与定位

相关文章