css 的位置怎么设置


本文摘自PHP中文网,作者藏色散人,侵删。

css可以使用position属性来设置元素显示位置,设置位置的代码语句如“position:relative;”,其中relative表示生成相对定位的元素,并且是相对于其正常位置进行定位。

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

css可以使用position属性来设置元素显示位置,这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。

css设置位置的position属性说明:

属性值:

86cb4e9244c221a32cd6c89179a73ef.png

【推荐学习:css视频教程】

css设置位置示例:

1、演示如何相对于一个元素的正常位置来对其定位。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<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>

<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>

<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>

</body>

</html>

效果图:

阅读剩余部分

相关阅读 >>

对响应式web设计的方法实现

css实现底层毛玻璃效果(代码示例)

css如何让滚动条不显示

css怎么实现禁止点击

关于css样式表及多重样式优先级的介绍

css怎样隐藏文本框边框

css相对定位什么意思

css text-decoration-style属性怎么用

vue.js与css区别是什么

css direction属性怎么用?

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...