position定位

最新推荐文章于 2023-07-30 11:54:07 发布

CHENww_

最新推荐文章于 2023-07-30 11:54:07 发布

阅读量197

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/CHENww_/article/details/120811507

版权

一、position-absolute:

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
h2
{
	position:absolute;
	left:100px;
	top:150px;
}
</style>
</head>

<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>

</html>

二、 position-fixed:

生成固定定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

三、 position-relative:

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

四、 position-static:

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

五、 position-sticky:

粘性定位，该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

六、 position-inherit:

规定应该从父元素继承 position 属性的值。

七、

设置该属性为默认值，详情查看 CSS initial 关键字。

外加一个图片定位（background-position）

background-position属性设置背景图像的起始位置。

注意对于这个工作在Firefox和Opera，background-attachment必须设置为 "fixed（固定）".

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
body
{ 
	background-image:url('smiley.gif');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center; 
}
</style>
</head>

<body>
<p><b>注意：</b>该属性工作在 Firefox 和 Opera, background-attachment 属性会被设置为 "fixed"。</p>
</body>
</html>

CHENww_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
position定位

一、position-absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>h2{
复制链接

扫一扫