CSS中position定位属性如何使用，有哪些要注意？

发布时间：2023-08-17 14:15:11 所属栏目：语言来源：

导读： 这篇文章我们来了解CSS中position定位属性的相关内容，position定位属性是CSS学习中的基础知识，因此本文就给大家来介绍一下，下文有详细的介绍，有需要的朋友可以参考，接下来就跟随小编来一起学习一下吧！

    这篇文章我们来了解CSS中position定位属性的相关内容，position定位属性是CSS学习中的基础知识，因此本文就给大家来介绍一下，下文有详细的介绍，有需要的朋友可以参考，接下来就跟随小编来一起学习一下吧！

    本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。

    在css中，position是元素的定位属性。position属性的作用就是规定元素的定位类型，这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

    其中属性值如下：

    相对定位示例如下：

<html>

<head>

<style type="text/css">

h2.pos_left

{

position:relative;

left:-20px

}

h2.pos_right

{

position:relative;

left:20px

}

</style>

</head>

<body>

<h2>这是位于正常位置的标题</h2>

<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>

<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>

<p>相对定位会按照元素的原始位置对该元素进行移动。</p>

</body>

</html>

    固定定位示例如下：

<html>

<head>

<style type="text/css">

p.one

{

position:fixed;

left:5px;

top:5px;

}

p.two

{

position:fixed;

top:30px;

right:5px;

}

</style>

</head>

<body>

<p class="one">一些文本。</p>

<p class="two">更多的文本。</p>

</body>

</html>

    固定定位会使元素相对于浏览器窗口进行固定。

    绝对定位示例如下：

<html>

<head>

<style type="text/css">

h2.pos_abs

{

position:absolute;

left:100px;

top:150px

}

</style>

</head>

<body>

<h2 class="pos_abs">这是带有绝对定位的标题</h2>

<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>

</body>

</html>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!