为什么设立position：absolute之后<h1>不是独占一行了？

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>banner</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

font-family: Microsoft YaHei UI, sans-serif;

}

.banner{

position: relative;

}

img{

width: 100%;

height: 675px;

position: absolute;

z-index: 1;

}

h1{

text-align: center;

font-size: 48px;

position: absolute;

top: 200px;

left: 0;

right: 0;

z-index: 2;

}

p{

text-align: center;

font-size: 24px;

position: absolute;

top: 280px;

left: 0;

right: 0;

z-index: 2;

}

</style>

</head>

<body>

<section>

<img src="2/images/banner.jpg">

<h1>Weclome to Website</h1>

<p>Lorem ipsum dolor sit amet,consectetur adipisicing edit</p>

</section>

</body>

</html>

这是作业里的banner区域

为什么把<h1>绝对定位且不给出 left 和 right 数值，就没有独占一行了？还有为什么这么写了就可以实现水平居中了？

xurdy 2017-02-13

源自：HTML5展望 3-2 作业题

收起

1回答

Python工程师 2017-02-14 10:34:06

absolute属性会使得元素脱离文档流，当元素脱离文档流后会导致元素无法计算自己的宽度和高度，所以只能以inline-block的方式显示，而inline-block就是既可以设置宽高度，也可以有内联元素在同一行显示的特性；这么说能理解么？帮忙采纳一下呗

收起回答

提问者 xurdy #1

1、为什么元素脱离文档流后会导致元素无法计算自己的宽度和高度？ 2、既然无法计算自己的高度和宽度，那么上述例子中<h1> 宽：503px，高：61px怎么来的？

2017-02-14 21:21:56

相似问题

请问下老师，div不是块元素吗，应该独占一行，为何这里12列才占了一行，只有十三列才占据了下一行

最后讲的层叠部分，h1的大小为什么不是2乘以12px

为什么无法排除section里的第一个H1，而且剩余的H1也无法选中了

为什么星星的单独写一个starScore.js

为什么fun1和fun2是两个独立的闭包呢

登录后可查看更多问答，登录/注册

HTML5与CSS3实现动态网页 2018

参与学习 1887 人
提交作业 4643 份
解答问题 5760 个

有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。

了解课程

本课精华内容

问答作业

请忽略此问答

26 33

公式书写。。

31 19

3-8编程练习哪有问题

47 17

全局变量与函数内的全局变量

119 15

编程练习4-4的问题

111 15

查看更多本课问答

请稍等 ...

为什么设立position：absolute之后<h1>不是独占一行了？

为什么设立position：absolute之后<h1>不是独占一行了？

正在回答回答被采纳积分+1

请选择置顶位置