css定位兼容性,CSS基础：定位与浏览器兼容性
position属性
介绍： CSS position属性⽤于指定⼀个元素在⽂档中的定位⽅式。top，right，bottom 和 left 属性则决定了该元素的最终位置。
position 属性值
static
介绍： 该关键字指定元素使⽤正常的布局⾏为，即元素在⽂档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性⽆效。
.box {
position: static;
}
relative
介绍： 该关键字下，元素先放置在未添加定位时的位置，再在不改变页⾯布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空⽩)。
.box {
position: relative;
top: 40px;
left: 40px;
}
position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素⽆效。
absolute
介绍：元素会被移出正常⽂档流，并不为元素预留空间，该元素会相对于最近的⾮ static 定位祖先元素左上⾓为坐标原点进⾏偏移，来确定元素位置。绝对定位的元素可以设置外边距(margins)，且不会与其他边距合并。
.
box {
position: absolute;
top: 40px;
left: 40px;
}
fixed
介绍：元素会被移出正常⽂档流，并不为元素预留空间，⽽是通过指定元素相对于屏幕视⼝(viewport)左上⾓为坐标原点进⾏偏移。元素的位置在屏幕滚动时不会改变。fixed 属性会创建新的层叠上下⽂。
.box {
position: fixed;
top: 40px;
left: 40px;
}
注意：fixed⼀般都会以页⾯左上⾓作为坐标原点，但是如果该元素中存在某个祖先元素设置了 transform, perspective 属性，或 filter 属性⾮ none 时，元素将会以该祖先左上⾓作为坐标原点。
sticky(粘性定位)
介绍：元素根据正常⽂档流进⾏定位，然后相对它的最近滚动祖先和最近块级元素祖先，包括table-related元素进⾏偏移。粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位偏移值不会影响任何其他元素的位置。
/*
在 viewport 视⼝滚动到元素 top 距离⼩于 20px 之前，元素为相对定位。
之后，元素将固定在与顶部距离 20px 的位置，直到 viewport 视⼝回滚到阈值以下。
*/
.box {
position: -webkit-sticky;
position: sticky;
top: 20px;
}
该值总是创建⼀个新的层叠上下⽂(stacking context)。注意，⼀个sticky元素会“固定”在离它最近的⼀个拥有“滚动机制”的祖先上(当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时)
层叠上下⽂(补充)
概念：层叠上下⽂是HTML元素的三维概念，这些HTML元素在⼀条垂直于电脑屏幕或⽹页的 z 轴上延伸，HTML 元素依据其⾃⾝层叠⽔平(元素的优先显⽰顺序)占⽤层叠上下⽂的空间
定位相关属性
z-index：设置元素的层叠⽔平，该属性设定了⼀个定位元素及其后代元素。当元素之间重叠的时候， z-index 较⼤的元素会覆盖较⼩的元素在上层进⾏显⽰。
.
box {
position: absolute;
/* 字符值 */
z-index: auto;
/* 整数值 */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1;/* 使⽤负值降低优先级 */
}
auto： 盒⼦不会创建⼀个新的本地堆叠上下⽂。在当前堆叠上下⽂中⽣成的盒⼦的堆叠层级和⽗级盒⼦相同。
： (整型数字)是⽣成的盒⼦在当前堆叠上下⽂中的堆叠层级。此盒⼦也会创建⼀个堆叠层级为 0 的本地堆叠上下⽂。这意味着后代(元素)的z-indexes 不与此元素的外部元素的 z-indexes 进⾏对⽐。
注意： z-index 必须配合 relative、 absolute、 fixed、 sticky 使⽤。
位置属性：CSS通过 top、right、bottom、left 这四个属性定义了定位元素的上、右、下、左外边距边界与其参照元素对应边之间的偏移，⾮定位元素设置此属性⽆效。
位置属性的效果取决于元素的position属性：
当position设置为absolute或fixed时，位置属性指定了定位元素与其包含参照元素对应⽅向边距之间的偏移。
当position设置为relative时，位置属性指定了元素的对应⽅向边界与⾃⾝初始位置的偏移。
当position设置为sticky时，如果元素在viewport⾥⾯，位置属性的效果和relative等同；如果元素在viewport外⾯，位置属性的效果和position为fixed等同。
当position设置为static时，位置属性⽆效。
当left和right同时指定时，元素的位置会被重复指定。当容器是从左到右时，left的值会被优先设定；当容器是从右到左时，right的值会被优先设定。
当top和bottom同时指定时，并且 height没有被指定或者指定为auto的时候，top和bottom都会⽣效，在其他情况下，如果 height被限制，则top属性会优先设置，bottom属性则会被忽略。
rotate属性
vertical-align (补充)
CSS 的属性 vertical-align ⽤来指定⾏内元素(inline)或表格单元格(table-cell)元素的垂直对齐⽅式。
img {
vertical-align: baseline | top | middle | bottom | sub | text-top;
}
baseline：使元素的基线与⽗元素的基线对齐。HTML规范没有详细说明部分可替换元素的基线，如 ，这意味着这些元素使⽤此值的表现因浏览器⽽异。
可以替换元素有
top：使元素及其后代元素的顶部与整⾏的顶部对齐。
middle：使元素的中部与⽗元素的基线加上⽗元素x-height(x字符⾼度)的⼀半对齐。
bottom：使元素及其后代元素的底部与整⾏的底部对齐。
sub：使元素的基线与⽗元素的下标基线对齐。
text-top：使元素的顶部与⽗元素的字体顶部对齐。
vertical-align属性可被⽤于两种环境：
使⾏内元素盒模型与其⾏内元素容器垂直对齐。例如，⽤于垂直对齐⼀⾏⽂本的内的图⽚：
垂直对齐表格单元内容:
注意： vertical-align 只对⾏内元素、表格单元格元素⽣效：不能⽤它垂直对齐块级元素。
css浏览器兼容性
ResetCSS (样式重置)
介绍：由于每个浏览器的css默认样式不尽相同，所以最简单有效的⽅式就是重置默认样式(reset css)，最简单的实现⽅法就是在所有CSS 开始前，先把marin和padding都设为0，以防不同浏览器的显⽰效果不⼀样。
* {
margin: 0;
padding: 0;
但是这段代码过于简单并不能解决绝⼤多数开发中遇到的浏览器不兼容问题，并且使⽤通配符选择器影响页⾯性能。这⾥推荐使⽤专门的样式重置库，实现样式重置功能
/*reset.css*/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
浏览器私有属性
介绍：我们经常会在某个CSS的属性前添加⼀些前缀，⽐如-webkit- ，-moz- ，-ms-，这些就是浏览器的私有属性。
为什么会出现私有属性呢？
通常，W3C组织成员提出⼀个新属性，制定标准，要⾛很复杂的程序，审查等。⽽浏览器商市场推⼴时间紧，如果⼀个属性已经够成熟了，就会在浏览器中加⼊⽀持。
但是为避免⽇后W3C公布标准时有所变更，会加⼊⼀个私有前缀，⽐如-webkit-border-radius，通过这种⽅式来提前⽀持新属性。等到⽇后W3C公布了标准，border-radius的标准写法确⽴之后，再让新版的浏览器⽀持border-radius这种写法。
常⽤的前缀有：
1. -moz代表firefox浏览器私有属性
2. -ms代表IE浏览器私有属性
3. -webkit代表chrome、safari私有属性
4. -o代表opera私有属性
对于私有属性的顺序要注意，把标准写法放到最后，兼容性写法放到前⾯
.
demo {
-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。