【零基础学习web前端】CSS布局-position定位

Amy · 发表于 2018-12-4 17:04:15

【零基础学习web前端】CSS布局-position定位

【零基础学习web前端】教程目录导航

http://www.sufeinet.com/thread-24027-1-1.html

我们使用position属性设置元素的位置。

absolute 绝对定位
relative 相对定位
fixed 固定定位

元素的位置也由顶部，底部，左侧和右侧属性控制。
但是，除非先设置position属性，否则这些属性将不起作用。

固定定位（fixed）不会随鼠标的滚动而改变位置，是固定在屏幕的某一个位置。
绝对定位（absolute）的定位原点是非默认定位（static）的父节点，
可以是（absolute fixed relative）。如果没有这些，定位原点就是body。
fixed和absolute都会元素使原本占用的布局空间脱离文档流。
下面分别是默认布局，和使用绝对定位（absolute）之后的
图示效果：

代码为：

[CSS] 纯文本查看 复制代码

div {
background: blue;
color: #fff;
font-size: 30px;
position: absolute;
}
h1{
    border: 1px solid red;
}

[HTML] 纯文本查看 复制代码

<h1>苏飞论坛</h1>
<div>欢迎您</div>
<h1>c#爬虫论坛，最牛HttpHelper万能框架</h1>     
<html>

相对定位（relative）是相对原有位置定位，且元素原来占用的布局空间仍保留在文档中
上例中使用relative定位后的效果：

如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，
因为它不受父级元素的padding的属性影响，此时子代的定位原点就是父级元素的左上角。

liu · 发表于 2018-12-4 18:44:28

我只是路过打酱油的。

竹林风 · 发表于 2018-12-4 19:42:03

看到这帖子真是高兴！

惜 · 发表于 2018-12-4 21:13:54

我只是路过打酱油的。

		自动登录	找回密码
密码			马上注册

[CSS] 【零基础学习web前端】CSS布局-position定位

相关帖子