div元素(css)定位

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/julystroy/article/details/83146704

1.定位:相对定位(position:relative)

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

效果就是:
--------------------------------我是标题--------------------------------
-----------------------------我是标题向左移动------------------------
----------------------------------我是标题向右移动-------------------
2.绝对定位(position:absolute)

<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>

<body>
<h2 class="pos_abs">我是绝对定位的标题</h2>
</body>

</html>

效果:
·---------------------------------------------
·
·
· ·············我是绝对定位的标题
·
·


3.固定定位(position:fixed;)

<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">我是1在这。</p>
<p class="two">我是2在这。</p>

</body>
</html>

效果:

·······我是1在这。
···········································································································我是2在这。

其他的根据padding和margin去控制、精确位置。

展开阅读全文

没有更多推荐了,返回首页