css定位拓展效果 |css 3d旋转显示背部

css 相邻浮动，css表格兼容模式，怎么快速看css样式，css固态硬盘使用次数，CSS打印时隐藏文本，css中怎样设置半透明，css 3d旋转显示背部 css定位拓展效果 |css 3d旋转显示背部

首先，大家来看一下CSS定位的基础知识。

position: static | relative | absolute | fixed | sticky;

其中，static是默认值，元素按照文档流排列；relative则是相对定位，元素会相对于自身的位置调整；absolute是绝对定位，元素的位置相对于最近的非static定位祖先元素；fixed是固定定位，元素的位置相对于视窗；sticky则是粘性定位，元素在跨越特定阈值前为相对定位，之后为固定定位。

接下来，大家可以看一些CSS定位的拓展效果。

1. 悬停显示效果

.hover {
position:relative;
}
.hover:hover .tooltip {
display:block;
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
}

这个效果可以让大家在鼠标悬停在某个元素上时，显示一个浮动框。”

2. 悬浮效果

.float {
position:fixed;
bottom:0;
left:0;
width:100%;
z-index:999;
}

这个效果可以让大家创建一个悬浮在最底部的元素。这个元素在滚动网页时会一直保持在底部。

3. 左中右定位效果

.left {
position:absolute;
left:0;
}
.center {
position:absolute;
left:50%;
transform:translateX(-50%);
}
.right {
position:absolute;
right:0;
}

这个效果可以让大家将元素分别靠左、居中、靠右定位。

CSS定位效果是网页布局不可或缺的一部分，通过上述拓展效果能够更好地实现网页的视觉效果。学习好CSS定位，才能更好地制作出优美的网页。