position定位CSSposition属性用于指定元素在文档中的定位方式。top、right、bottom和left属性确定元素的最终位置。定位元素是其计算位置属性为相对、绝对、固定或粘性的元素。相对定位的元素是其计算的位置属性是相对的元素。绝对定位元素是其计算出的位置属性为绝对或固定的元素。粘性定位元素是其计算位置属性为粘性的元素。在大多数情况下，高度和宽度设置为auto的绝对定位元素会根据其内容大小调整大小。然而，绝对定位的元素可以通过指定顶部和底部来填充可用的垂直空间，而不指定高度（即自动）。他们还可以通过指定left和right以及auto宽度来填充可用的水平空间。除了刚刚描述的情况（绝对定位的元素填充可用空间）：如果指定了顶部和底部（技术上，不是自动的），顶部获胜。如果指定了左侧和右侧，则方向为ltr（英语、水平日语等）时以左侧为准，方向为rtl（阿拉伯语、希伯来语等）时为右侧。语法position属性被指定为从下面的值列表中选择的单个关键字。Valuestatic该关键字指定元素使用正常布局行为，即元素在文档的正常流中的当前布局位置。此时top、right、bottom、left和z-index属性没有作用。relative关键字下，先把元素放在没有加定位的位置，然后在不改变页面布局的情况下调整元素位置（所以在没有定位元素的地方留了个空白）。position:relative对table-*-group、table-row、table-column、table-cell、table-caption元素没有影响。absolute不为元素保留空间，通过指定元素相对于最近的非静态定位祖先元素的偏移量来确定元素的位置。绝对定位的元素可以在不与其他边距合并的情况下设置边距。fixed不为元素保留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。滚动屏幕时元素的位置不会改变。打印时，该元素会出现在每一页的固定位置。fixed属性创建一个新的堆叠上下文。当元素的祖先具有非无转换属性时，容器从视口更改为该祖先。示例位置：固定；相对于屏幕定位。topNavBar{position:fixed;顶部：0；左：0；width:100%;}/*固定相对于屏幕左上角的绝对定位，写position:absolute;在子元素父元素写position:relative;.userCard.welcome{display:inline-block;位置：相对；}.userCard.welcome.triangle{显示：块；位置：绝对；顶部：100%；left:4px;}/*紧靠父元素下方，几种简单的居中方法，在父元素上从左到右留出4px的边距这只是暂时的居中方法，后面会专门更新一篇居中文章，让inline居中.xxx子元素中的元素。xxx{text-align:center;}div子标签水平居中div{margin-left:auto;margin-right:auto;}div的高度为30px，div标签的大小为14px。文本垂直居中div{font-size:14px;line-height:30px;}或者div{font-size:14px;行高：24px；padding:3px0;}行高等于高度，或者行高加padding等于高度，可以让div中的文字垂直居中，但是只有当font-size比较小的时候，你可以使用line-height来控制行内元素所占的高度。如果太大，则很容易导致错误。如果你需要一个特定的高度，你可以在那个基础上添加padding来增加。元素的高度文档流元素在文档中流动的方向称为文档流。内联元素从左到右流动。如果宽度不够，将另起一行。对于汉字，一个句子可能从中间开始，但是如果是英文，如果css没有声明word-break:break-all;英文不会wrap的。块级元素从上到下流动，每个块占一行。块级元素高度元素的高度和宽度由其内容决定。一般情况下，除非万不得已，否则不要设置宽度和高度。块级元素的高度由其内部文档流的高度之和决定。不一定相等，只是决定，比如设置字体为100px，但是它的元素高度不是100px。内联元素的高度设置内联元素的宽高是无效的。设置margin-topmargin-bottom也是无效的。内联元素的高度也由文档流的内部元素决定。居中对齐是通过基线来对齐的，并且由于浏览器会给不同的字体一个建议的行高，这个内联元素的行高是结合建议的行高和其他相关设计来??决定的。分散的知识点背景图居中：background-position:centercenter;背景图像按比例缩放：background-size:cover;settingthewidth可以设置最大宽度，这样如果屏幕变小，可以自适应。设置display:inlineblock;后，外边距不会合并。如果要并排，先float:left放在子元素上；然后在所有子元素的父元素上设置clearfix，然后添加伪类。.clearfix::after{内容：'';显示：块；clear:both;}制作半透明图层背景：background-color:rgba(0,0,0,0.8);/不上色（黑色），半透明图层背景/
