CSS------定位和动画

6、定位

6.1、相对定位

相对定位：position：relative
相对于原来的位置，进行指定的偏移，相对定位任然在标准文档流中，原来的位置会被保留

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--    相对定位：相对原来的位置进行偏移--><style>body{padding: 20px;}div{margin:15px;padding: 5px;font-size: 15px;line-height: 25px;}#father{border: 2px solid #CE4A50;padding: 0;}#first{border: 2px solid #3d6694;background-color: #CE4A50;position: relative;/*相对定位*/top: 20px;/*距离上偏移20px*/}#second{border: 2px solid #CE4A50;background-color: #3d6694;}#three{border: 2px solid #3d6694;background-color: #CE4A50;}</style>
</head>
<body>
<div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="three">第三个盒子</div></div></body>
</html>

top:距离上偏移
left:距离左偏移
bottom:距离下偏移
right:距离右偏移

<!-- 练习-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>box</title><style>#box{width: 300px;height: 300px;padding: 10px;border: 2px solid #CE4A50;}a{width: 100px;height: 100px;background: #CE4A50;text-decoration: none;line-height: 100px;display: block;text-align: center;color: white;}a:hover{background: #3d6694;}.a2,.a4{position: relative;left: 200px;top: -100px;}.a5{position: relative;left: 100px;top: -300px;}</style>
</head>
<body>
<div id="box"><a class="a1"href="#">A</a><a class="a2"href="#">B</a><a class="a3"href="#">C</a><a class="a4"href="#">D</a><a class="a5"href="#">E</a>
</div>
</body>
</html>

6.2、绝对定位

定位：基于XXX定位，上下左右~
没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，通常会相对于父级元素进行偏移
在父级元素范围内移动
即相对于父级或浏览器的位置，进行指定的偏移，绝对定位不在标准文档流中，原来的位置不会被保留

positive:absolute

6.3、固定定位：fixed

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{height: 1000px;}div:nth-of-type(1){height: 100px;width: 100px;background: #CE4A50;position: relative;right: 0;bottom: 0;}div:nth-of-type(2){height: 50px;width: 50px;background: #3d6694;position: fixed;right: 0;bottom: 0;}</style></head>
<body>
<div>A</div>
<div>B</div>
</body>
</html>

6.4、z-index：图层

z-index：默认是0，最高无限~999

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../zindex.css">
</head>
<body>
<div id="content"><ul><li ><img src="../picture/斯嘉丽.jpg" height="313" width="500" alt=""></li><li class="tipText">无边落木萧萧下</li><li class="tipBg"></li><li>时间：2021-01-25</li><li>地点：舞台</li></ul>
</div>
</body>
</html>

#content{height: 380px;margin: 0;padding: 0;overflow: hidden;font-size: 12px;line-height: 25px;border: 2px solid #CE4A50;
}
ul,li{margin: 0;padding: 0;list-style: none;
}
/*父级元素相对定位*/
#content ul{position: relative;
}
.tipText,.tipBg{position: absolute;height: 380px;width: 200px;top: 270px;font-size: 25px;color: #CE4A50;left:10px
}
.tipText{color: white;z-index: 0;/*图层*/
}
.tipBg{background: #3d6694;opacity: 0.2;/*背景透明度*/
}

7、动画

模版之家
卡巴斯基网络威胁
Canvas

CSS------定位和动画相关推荐

【前端第四课】CSS值和单位；CSS文字排版；CSS变换，过渡，动画；CSS定位
目标了解掌握CSS值和单位了解掌握CSS文字排版了解掌握CSS变换,过渡,动画了解掌握CSS定位 CSS的值和单位 https://developer.mozilla.org/zh-CN/do ...
纯CSS实现图片动画
纯CSS实现图片动画 1.先网上下载一张sprites动画图片,直接百度搜sprites图片就可. 2.用css设置一个关键帧,确定好起始位置和终止位置, 通过background-position调 ...
css 变量_如何将CSS变量用于动画
css 变量当我们在讨论中提到CSS时,我们通常将其称为愚蠢的语言. 一种声明性语言,缺乏逻辑和洞察力: 但这不是真实的现实. 多年来,开发人员一直渴望标准CSS中的变量,长期以来一直被诸如LESS ...
w3c标准 - Css - （4）CSS定位方案
w3c标准 - Css - (4)CSS定位方案 1. 定位之前看一下BFC (1) 解释 BFC(Block formatting context)直译为"块级格式化上下文".它 ...
如何用css实现波纹动画效果
波纹效果可以用css的 animation 动画来实现,animation 相比单纯用 transform 能实现更为复杂的效果. 效果图: 下面三张图分别为原图.效果图和去掉背景图片后的效果图, ...
CSS 定位详解：原理与案例
本文要点: 详细讲解了CSS最常见的三种定位方式:fixed, absolute, relative. 讲解了典型的定位案例与使用场景,并结合了特效与过渡动画. 补充了图解CSS定位. CSS 定位( ...
css 加载动画如何生效,CSS 加载动画
CSS加载动画实现加载动画效果,需要的两个关键步骤: 1.做出环形外观 border:16px solid #f3f3f3; border-radius:50%; border-top:16px s ...
python-selenum3 第五天定位——不常用定位与css定位详
使用tag来定位 tag定位的是标签,不常用例如:百度的输入框标签是input 最终会报错,因为百度首页input标签太多了 driver = webdriver.Firefox(executabl ...
CSS 定位 (Positioning)
CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...
css位置布局,CSS定位布局相关
本文档包括CSS的样式定位框模型如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动.当文档滚动到超过图像的位置时,图像就会消失. 您可以通过 background-p_w_upload ...

CSS------定位和动画

6、定位

6.1、相对定位

6.2、绝对定位

7、动画

CSS------定位和动画相关推荐

最新文章

热门文章