定位：

绝对定位Absolution：

元素会脱离文档流，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是空的，下面的的元素会来占据。

<style>#app {position: absolute;width: 300px;height:200px;background:red;z-index: -1;}#test {width: 300px;height:200px;background:blue;/* 相对于 父级最近具有定位的元素进行定位，如果父级没有定位的元素，则相对于浏览器进行位置。绝对定位会脱离正常的文档流  */position: absolute;left: 300px;top: 50px;}.xxx {position: absolute;height: 200px;}#xxxxxx {position: relative;width: 600px;height:200px;background:green;}</style><body><div class="xxx"><div><div id="app"></div><div id="test"></div></div>
</div><div id="xxxxxx"></div></body>

相对定位Relative：

元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{width: 300px;height: 250px;}#红块{background: red;}#蓝块{height: 200px;background: deepskyblue;position: relative;right: -300px;top: -250px;}#黄块{background: yellow;float: left;}</style></head>
<body><div id="红块"></div><div id="蓝块"></div>
<div id="黄块"></div></body>
</html>

通俗来说：

绝对定位相当于将该块拿起来，然后摆放在其他块的头顶上，所以会遮盖其他块，且不会占（最底下一层）其他块的位置。但是会受其父类块的影响，不能超过他的父类块区域。
因为在不设置的情况下，其父类块区域是body，就是整个网页，因此会遮挡其他块。
然是如果他的父类块是另一个div之类的，该绝对定位的块，不能超出其父类块的区域。

相对定位则是本身留在原地，但是隐身了，看不见却能占位置
举个例子：相对定位就是放出去的风筝，人还在地上，但是从天上往下看只能看到风筝。人在地上占着位置，但是风筝不会占其他地上人的位置。
反之，绝对定位就是人飞起来了，不占位置

固定定位Fixed：

固定在浏览器某个确定的位置，不会发生变化。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#adv {position: fixed;width: 150px;height:300px;background-color: #777;right: 0;bottom: 20px;}</style>
</head>
<body><p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p><p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p><div id="adv"></div></body>
</html>

太极图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.app {position: absolute;width: 400px;height: 400px;margin: 0 auto;overflow: hidden;}.app .cr.left {left: 0px;background-color: #000;}.app .cr {position: absolute;width: 400px;height:400px;left: -200px;background-color: #fff;border-radius: 50%;}.app.right {position: absolute;left: 200px;}.in-cr-t {position: absolute;width: 200px;height:200px;background-color: #000;left: 100px;border-radius: 50%;}.in-cr-b {position: absolute;width: 200px;height:200px;background-color: #fff;left: 100px;top: 200px;border-radius: 50%;}.in-cr-t0 {position: absolute;width: 50px;height:50px;background-color: #fff;left: 175px;top: 75px;border-radius: 50%;}.in-cr-b0 {position: absolute;width: 50px;height:50px;background-color: #000;left: 175px;top: 275px;border-radius: 50%;}@keyframes tjt {to {transform: rotate(360deg);}}</style></head>
<body><div style="position: relative;height:400px;width: 400px; z-index:999; animation: tjt 2s linear infinite"><div class="app"><div class="cr left"></div></div><div class="app right"><div class="cr"></div></div><div class="in-cr-t"></div><div class="in-cr-b"></div><div class="in-cr-t0"></div><div class="in-cr-b0"></div></div></body>
</html>

轮播图

这里先做出样式用的小米官方的图片，侵权的话本人会自删的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}ul{list-style: none;}a{text-decoration: none;}.swiper {position: relative ;width: 960px;height: 460px;margin:50px auto 0;/*background-color: red;*/}.swiper img{position: absolute;width: 100%;height: 100%;display: none; /* 四张图片全部隐藏*/}.swiper img:first-child {display: block;}.swiper .dots{position: absolute;height: 40px;width: 100%;background-color: rgba(0,0,0,0.5);bottom: 0px;text-align: center;font-size: 0;}.swiper .dots span{display: inline-block;width: 10px;height: 10px;background-color: snow;margin: 15px 5px;border-radius: 50%;}.swiper .dots .cur{background-color: red;}.swiper .left ,.swiper .right{position: absolute;width: 40px;height: 70px;background: url("./images/icon-slides.png")no-repeat;top :210px;}.swiper .right{right: 0px;background-position: -43px 0;}.swiper .left:hover{background-position: -85px 0;}.swiper .right:hover{background-position: -128px 0;}</style>
</head>
<body>
<div class="swiper">
<ul><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a532e33470d046b3f044d5ea49fc5e9e.png?thumb=1&w=1226&h=460&f=webp&q=90" /><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/918820682e4a490221cfd92b24c14b86.jpg?thumb=1&w=1226&h=460&f=webp&q=90" /><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/67c7222fbcf98db942718eaf29f32297.jpg?thumb=1&w=1226&h=460&f=webp&q=90" /><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/01a5d7313fe344bddb9e4081df4dc998.jpg?w=2452&h=920" />
</ul><div class="dots"><span class="cur"></span><span></span><span></span><span></span></div><div class="left"></div><div class="right"></div></div></body>
</html>

基于滚动条的轮播图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#swiper {width: 960px;height: 400px;position: relative;margin: 50px auto 0 ;white-space: nowrap;overflow: scroll;font-size: 0;}#swiper img {width: 100%;height: 100%;}</style>
</head>
<body><div id="swiper"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a532e33470d046b3f044d5ea49fc5e9e.png?thumb=1&w=1226&h=460&f=webp&q=90" /><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/918820682e4a490221cfd92b24c14b86.jpg?thumb=1&w=1226&h=460&f=webp&q=90" /><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/67c7222fbcf98db942718eaf29f32297.jpg?thumb=1&w=1226&h=460&f=webp&q=90" /><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/01a5d7313fe344bddb9e4081df4dc998.jpg?w=2452&h=920" /></div></body>
</html>

简单transfrom变换效果

简单的动画效果，作为后端程序员，动画这方面稍作了解即可。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#app {width: 300px;height: 200px;background: red;animation: xxx 1s linear infinite forwards;}@keyframes xxx {from {}to {transform: translate(300px, 50px);width: 200px;background-color: blue;border-radius: 50%;}}#app:hover {width: 200px;border-radius: 50%;transform: translate(300px, 200px) ;/* transition 属性 过渡时长 速度(默认先快后慢) linear(匀速) */transition: all 2s linear ;}</style>
</head>
<body><div id="app"></div>
</body>
</html>

JAVA程序员笔记（第二阶段：前端）第4篇——定位、太极图、经典轮播图一、简单transfrom变换效果相关推荐

java程序员需要会前端吗_一个后端程序员，需要掌握前端技术吗？
一个后端程序员,需要掌握前端技术吗? JSP时代 8年前,刚刚进入编程这个行业,当时的Web开发使用古老的SSH框架+JSP.那个时候,几乎所有的Java程序员都要懂得如何写JavaScript.如何 ...
80后程序员感慨中年危机，Java程序员最新职业规划，面试篇
前言一次偶然,从朋友那里得到一份"java高分面试指南",里面涵盖了25个分类的面试题以及详细的解析:JavaOOP.Java集合/泛型.Java中的IO与NIO.Java反射. ...
前端学习（2782）：获取轮播图的数据
前端学习（975）：bootstrap轮播图
1引入js和css 2引入html 2运行结果
java程序员具体是做什么的？我来分享一天的工作内容
现在我来讲一下今天的工作情况.今天的工作内容是,我们一个项目上线了.测试那边测试了一下,然后我这边负责改bug.但是在改的过程中,我遇到了一些让自己心里特别不爽的情况. 我们的产品那块逻辑没有写清楚. ...
作为java程序员针对未来3年的深思
做开发已经7,8年了,可能随着年龄的不断增加,最近也一直在反思未来的走向,现给出初学者的几点建议. 作为一名Java程序员,未来三年的发展方向主要包括以下几个方面: 1.深入学习Java 9.10.1 ...
Java程序员面试宝典
第1部分求职过程古人云:凡事预则立,不预则废.机会都是垂青有准备的人的.为了得到一份满意的工作,大家一定要对整个求职过程有清醒的了解.把能够预见的.必须做的事情早一些做完,这样在大规模招聘开始的 ...
java里用set写自我介绍代码_【优质】java程序员自我介绍-优秀word范文 (8页)
本文部分内容来自网络整理,本司不为其真实性负责,如有异议或侵权请及时联系,本司将立即删除! == 本文为word格式,下载后可方便编辑和修改! == java程序员自我介绍第1篇第2篇第3篇第4篇第 ...
前端实例练习 - 轮播图
轮播图代码储存在Github 效果预览初衷:很多人在初学前端的时候都会问,"如何入门前端?" 同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 "入 ...

JAVA程序员笔记（第二阶段：前端）第4篇——定位、太极图、经典轮播图一、简单transfrom变换效果

定位：