html 04 css定位

最新推荐文章于 2024-03-05 11:41:09 发布

wuhan_yking

最新推荐文章于 2024-03-05 11:41:09 发布

阅读量196

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/wuhan_yking/article/details/52754233

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、定位属性介绍

①属性名称：position

②三种方式：

1>static ，默认定位方式

2>relative，相对定位，相对于原来的位置，但是原来的位置仍然保留

3>absolute,绝对定位，相对于最近的非标准定位，原来的位置消失，被后面的位置顶替

③判断你是否熟练掌握的练习

先局部在整体练习

④实例说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        width:50px;
        height:50px;
    }
#div1{
    background: red;
    float: left;
}
#div2{
    background: orange;
    float: left;
}
#div3{
    background: blue;
    clear: both;
    position: relative;
    left: 50px;
}
#div4{
    background: violet;
    position: relative;
    left: 50px;

}
</style>
<body>
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
<div id="div3">我是div3</div>
<div id="div4">我是div4</div>
</body>
</html>

效果图：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wuhan_yking

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 04 css定位

一、定位属性介绍①属性名称：position②三种方式：1>static ，默认定位方式2>relative，相对定位，相对于原来的位置，但是原来的位置仍然保留3>absolute,绝对定位，相对于最近的非标准定位，原来的位置消失，被后面的位置顶替③判断你是否熟练掌握的练习先局部在整体练习④实例说明html>lang="en">
复制链接

扫一扫