相对定位与绝对定位

最新推荐文章于 2023-05-24 22:16:01 发布

ll123_lyf

最新推荐文章于 2023-05-24 22:16:01 发布

阅读量187

点赞数

css核心内容--浮动浮动--清除浮动
如果不希望别的元素在某个元素的左边或者右边，可以使用清除浮动的方法clear:right;clear:left;clear:both;
css核心内容--定位定位--基本概念
css定位(Positioning)属性允许你对元素进行定位.position属性值：
static(默认值):元素框正常生成。块级元素生成一个矩形框，作为文档流/标准流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative(相对定位):元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。从这一角度看，好像该元素仍然在文档流/标准流中一样。
absolute(绝对定位):元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed(固定定位，基本不使用):元素框的表现类似于将position设置为absolute，不过其包含块的视窗本身。

例子

<html>

<head>
<title>div11.htmlrelative相对定位示例</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">

</head>

</body>

</html>

body{
margin: 0px auto; width: 1000px; height: 1000px;
border: 1px solid pink; }
.div1{
margin-top:10px; margin-left:10px;

width:150px; height:100px;
border: 1px solid blue; background-color: pink; float: left; }
#special{
position: relative;/*这里我们使用了相对定位relative*/

left: 80px;/*在原来的位置向右移动大小*/

top: 120px;/*在原来的位置向下移动多少*/ }
特别注意：相对定位中移动的方向是显示出来的方向是相反的left则是向右，right则是向左，top是向下,bottom是向上

<html>

   <head>
    <title>div12.htmlabsolute绝对定位示例</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">

</body> </html>

body{
margin: 0px auto; width: 1000px; height: 1000px;
border: 1px solid pink; }
.div1{
margin-top:10px; margin-left:10px; width:150px; height:100px;
border: 1px solid blue; background-color: pink; float: left; }
#special{
position: absolute;/*这里我们使用了绝对定位absolute*/
left: 150px;/*在距离最近的非标准排序的块的起始位置位置向左移动大小*/

top: 160px;/*在距离最近的非标准排序的块的起始位置位置向下移动多少*/ }

ll123_lyf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
相对定位与绝对定位

css核心内容--浮动浮动--清除浮动如果不希望别的元素在某个元素的左边或者右边，可以使用清除浮动的方法clear:right;clear:left;clear:both; css核心内容--定位定位--基本概念 css定位(Positioning)属性允许你对元素进行定位.position属性值： static(默认值):元素框正常生成。块级元素生成一个矩形框，作
复制链接

扫一扫