个性化阅读
专注于IT技术分析

CSS位置position

本文概述

CSS position属性用于设置元素的位置。它还可用于将元素放置在另一个元素之后, 并且对于脚本化动画效果很有用。

你可以使用top, bottom, left和right属性定位元素。只有先设置位置属性后, 才能使用这些属性。位置元素的计算位置属性是相对的, 绝对的, 固定的或粘滞的。

让我们看一下以下CSS定位:

  1. CSS静态定位
  2. CSS固定位置
  3. CSS相对定位
  4. CSS绝对定位

1)CSS静态定位

默认情况下, 这是HTML元素的位置。它始终根据页面的正常流程定位元素。它不受top, bottom, left和right属性的影响。


2)CSS固定位置

fixed定位属性有助于将文本固定在浏览器上。此固定测试相对于浏览器窗口定位, 即使滚动窗口也不会移动。

<!DOCTYPE html>
<html>
<head>
<style>
p.pos_fixed {
    position: fixed;
    top: 50px;
    right: 5px;
    color: blue;
}
</style>
</head>
<body>

<p>Some text...</p><p>Some text...</p><p>Some text...</p><p>........</p><p>.... ...</p
><p>........</p><p>........</p><p>........</p><p>........</p>
<p>........ </p><p>........</p><p>........</p><p>........</p><p>........</p>
<p>........</p><p>........</p><p>Some text...</p><p>Some text...</p><p>Some text...</p>
<p class="pos_fixed">This is the fix positioned text.</p>
</body>
</html>

3)CSS相对定位

相对定位属性用于相对于其正常位置设置元素。

<!DOCTYPE html>
<html>
<head>
<style>
h2.pos_left {
    position: relative;
    left: -30px;
}
h2.pos_right {
    position: relative;
    left: 30px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is positioned left according to its normal position</h2>
<h2 class="pos_right">This heading is positioned right according to its normal position</h2>
<p>The style "left:-30px" subtracts 30 pixels from the element's original left position.</p>
<p>The style "left:30px" adds 30 pixels to the element's original left position.</p>
</body>
</html>

4)CSS绝对定位

绝对定位用于相对于具有非静态位置的第一父元素定位元素。如果找不到这样的元素, 则包含的块为HTML。

通过绝对定位, 你可以将元素放置在页面上的任何位置。

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
    position: absolute;
    left: 150px;
    top: 250px;
}
</style>
</head>
<body>
<h2>This heading has an absolute position</h2>
<p> The heading below is placed 150px from the left and 250px from the top of the page.</p>
</body>
</html>

所有CSS位置属性

没有。 属性 描述 价值观
1) bottom 用于设置定位框的底部边缘。 自动, 长度, %, 继承
2) clip 它用于剪切绝对定位的元素。 形状自动继承
3) cursor 它用于指定要显示的光标的类型。 网址, 自动, 十字线, 默认, 指针, 移动, 电子调整大小, ne调整大小, nw调整大小, n调整大小, se调整大小, sw调整大小, s调整大小, w调整大小, 文本, 等待, 帮助
4) left 它为定位的框设置左边缘。 自动, 长度, %, 继承
5) overflow 此属性用于定义如果内容溢出元素框会发生什么情况。 自动, 隐藏, 滚动, 可见, 继承
6) position 用于指定元素的定位类型。 绝对, 固定, 相对, 静态, 继承
7) right 用于设置定位框的右边距边缘。 自动, 长度, %, 继承
8) top 用于设置定位框的上边缘。 自动, 长度, %, 继承
9) z-index 用于设置元素的堆叠顺序。 数字自动继承
赞(0)
未经允许不得转载:srcmini » CSS位置position
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!