Back-end coders talk about front-end (CSS) Lesson 7: Positioning and Floating_html/css_WEB-ITnose

1. Positioning:

1. Understanding of positioning

(1) Relative positioning

Relative positioning is a very easy concept to master . If an element is positioned relatively, it will appear where it is. You can then move the element "relative to" its origin by setting a vertical or horizontal position.

If you set top to 20px, the box will be 20 pixels below the top of its original position. If left is set to 30 pixels, then 30 pixels of space will be created to the left of the element, which will move the element to the right.

#box_relative {

  position: relative;

  left: 30px;

  top: 20px;

}

As shown below Shown:

Note that when using relative positioning, the element still occupies the original space regardless of whether it is moved or not. Therefore, moving an element causes it to cover other boxes.

(2) Absolute positioning

Absolute positioning makes the position of the element independent of the document flow, so it does not occupy space. This is different from relative positioning, which is actually considered part of the normal flow positioning model because the element's position is relative to its position in the normal flow.
Other elements in the normal flow are laid out as if the absolutely positioned element did not exist:

#box_relative {

  position: absolute;

  left: 30px;

  top: 20px;

}

As shown below:

The position of an absolutely positioned element is relative to the nearest positioned ancestor element. If the element has no positioned ancestor element, then its The position is relative to the original containing block.
The main issue with positioning is to remember what each positioning means. So, now let's review what we learned: relative positioning is "relative to" the element's initial position in the document, while absolute positioning is "relative to" the nearest positioned ancestor element, if no positioned ancestor exists element, then "relative to" the original containing block.
Note: Depending on the user agent, the initial containing block may be a canvas or HTML element.
Tip: Because absolutely positioned boxes are independent of document flow, they can cover other elements on the page. The stacking order of these boxes can be controlled by setting the z-index property.

2. CSS positioning properties

CSS positioning properties allow you to position elements.

(1) position

Place the element in a static, relative, absolute, or fixed position.

Attribute value:

absolute: Generates an absolutely positioned element, positioned relative to the first parent element other than static positioning. The position of the element is specified via the "left", "top", "right" and "bottom" attributes.

fixed: Generates absolutely positioned elements, positioned relative to the browser window. The position of the element is specified via the "left", "top", "right" and "bottom" attributes.

relative: Generates a relatively positioned element, positioned relative to its normal position. Therefore, "left:20" adds 20 pixels to the element's LEFT position.

static:Default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations).

inherit: Specifies that the value of the position attribute should be inherited from the parent element.

(2) top, right, bottom, left

属性	描述
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。

属性值：

auto：默认值。通过浏览器计算上边缘的位置。

%：设置以包含元素的百分比计的上边位置。可使用负值。

length：使用 px、cm 等单位设置元素的上边位置。可使用负值。

inherit：规定应该从父元素继承 top 属性的值。

（3）overflow

设置当元素的内容溢出其区域时发生的事情。

属性值：

visible:默认值。内容不会被修剪，会呈现在元素框之外。

hidden:内容会被修剪，并且其余内容是不可见的。

scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit:规定应该从父元素继承 overflow 属性的值。

（4）clip

设置元素的形状。元素被剪入这个形状之中，然后显示出来。

属性值：

shape:设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)。

auto：默认值。不应用任何剪裁。

inherit：规定应该从父元素继承 clip 属性的值。

（5）vertical-align

设置元素的垂直对齐方式。

属性值：

baseline:默认。元素放置在父元素的基线上。

sub：垂直对齐文本的下标。

super：垂直对齐文本的上标

top：把元素的顶端与行中最高元素的顶端对齐

text-top：把元素的顶端与父元素字体的顶端对齐

middle：把此元素放置在父元素的中部。

bottom：把元素的顶端与行中最低的元素的顶端对齐。

text-bottom：把元素的底端与父元素字体的底端对齐。

length   

%:使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

inherit:规定应该从父元素继承 vertical-align 属性的值。

（6）z-index:设置元素的堆叠顺序。

属性值：

auto:默认。堆叠顺序与父元素相等。

number:设置元素的堆叠顺序。

inherit:规定应该从父元素继承 z-index 属性的值。

二、浮动

1、浮动的理解

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

2、CSS 浮动属性

float

属性值：

left：元素向左浮动。

right：元素向右浮动。

none：默认值。元素不浮动，并会显示在其在文本中出现的位置。

inherit：规定应该从父元素继承 float 属性的值。

实例（把图像向右浮动）：

img

  {

  float:right;

  }

3、来个实验吧！

示例1：（认识float的两种特性）

<!DOCTYPE html> 

<html>

    <head>

        <title>Demo</title>

    </head>

    <body>

        <div>

            <div style='float:left'><img  src="/static/imghwm/default1.png"  data-src="image/1.jpg"  class="lazy"  alt="Back-end coders talk about front-end (CSS) Lesson 7: Positioning and Floating_html/css_WEB-ITnose" ></div>

            <div>