html5绝对定位案例,如何使用css定位html元素？（附示例）

在页面上定位内容时，可以使用少量属性来帮助操作元素的位置。本文将给你介绍一些使用CSS position 属性包含不同定位元素类型的示例。

要在元素上使用定位，必须首先声明其位置property，该位置指定用于元素的定位方法的类型。使用position属性值，使用top，bottom，left和right属性定位元素。它们的位置也取决于它们的位置值。(推荐课程：css视频教程)

定位值有五种类型：static(静态的)、relative(相对的)、fixed(固定的)、absolute(绝对的)、sticky(黏性的)

static(静态的)

默认情况下，HTML元素定位为静态，元素根据文档的正常流程定位; 静态定位元素不受顶部，底部，左侧和右侧属性的影响。一个元素用position: static定位不会有其他特殊的定位方式。

用于将位置设置为静态的CSS是：position: static;

接下来是使用静态位置值的示例：

body {

color: WHITE;

font: Helvetica;

width: 420px;

}

.square-set,

.square {

border-radius: 15px;

}

.square-set {

background: darkgrey;

}

.square {

position: static;

background: Green;

height: 70px;

line-height: 40px;

text-align: center;

width: 90px;

}

SQUARE 1

SQUARE 2

SQUARE 3

SQUARE 4

效果如下：