首页 > 开发 > CSS > 正文

CSS网页布局：关于定位（position）

2024-07-11 08:25:01

字体：大中小

来源：转载

供稿：网友

使用CSS来定位页面内层的位置，一直是比较难以掌握的事情，很多时候，往往被绝对定位的元素，总是以浏览器的左上角为坐标原点，此时，如果浏览器的大小改变，被定义的层就会偏离设计想要的位置，让人很挠头。
其实，要想控制好层的绝对定位，只要理解CSS中关于定位（position）的定义，一切就会变得轻松简单。
CSS中关于定位（position）是这样定义的：
定位（position）允许用户精确定义元素框出现的相对位置，可以相对于它通常出现的位置，相对于其上级元素，相对于另一个元素，或者相对于浏览器视窗本身。每个显示元素都可以用定位的方法来描述，而其位置由此元素的包含块来决定的。
包含块（containing block）是格式编排发生的关联场景，例如，一个加粗的元素的包含块可以是该元素所出现的段落，如图1所示。

包含块

在理解定位之前，首先，要先理解HTML文件的结构，例如有一个html文件内容如下：

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>文档结构</title>

</head>

<body>

<h1>CSS规则</h1>

<p>样式表由一些<strong>样式规则</strong>组成。</p>

<ul>

<li>选择符

<ul>

<li>类选择符</li>

<li>ID选择符</li>

<li><em>包含</em>选择符</li>

上一篇：介绍我知道的hack方法

下一篇：CSS制作的三款漂亮的网页表单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注