CSS 定位元素

百变鹏仔 3个月前 (09-19) #CSS

文章标签元素

position 属性用于定位元素。即以下是定位元素 -

static - 元素框被布置为正常文档流的一部分，如下前面的元素和前面的后面的元素。
relative - 元素的框被布局为正常流的一部分，然后偏移一些距离。
绝对- 元素的框相对于其包含块进行布局，并且完全从文档的正常流程中移除。
固定- 元素的框是绝对定位的，具有针对位置描述的所有行为：绝对。
立即学习“前端免费学习笔记（深入）”；

以下是使用 CSS 定位元素的代码 -

示例

实时演示

<!DOCTYPE html><html><head><style>body {   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;}div {   color: white;   text-align: center;   height: 100px;   width: 100px;}.static {   position: static;   background-color: greenyellow;}.relative {   position: relative;   left: 50px;   background-color: rgb(255, 47, 47);}.absolute {   position: absolute;   right: 50px;   top: 20px;   background-color: hotpink;}</style></head><body><h1>Position elements example</h1><div class="static">STATIC</div><div class="relative">RELATIVE</div><div class="absolute">ABSOLUTE</div></body></html>

输出

上面的代码将产生以下输出 -

文章推荐

CSS 定位元素

示例

输出

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写