CSS 固定定位:固定在版心右侧

固定定位:固定在版心右侧

固定定位

定义:随用户滚动界面而一起移动的定位效果

CSS代码:

position:fixed;

边距:left,right,top,bottom.

距离衡量:相对于浏览器可视区域的四个角,可视区域即用户打开浏览器可以看到的区域

用处:用于类似浮动的广告,回到最上面的按钮等,跟随用户滑动窗口一起运动的组件。

 

如何实现固定在版心右侧

给需要固定的组件添加CSS代码:

position:fixed;

left:50% 

margin-left:父组件宽度的50%,如父组件为800px,则此处为400px;

解释:

left:50%; 使得组件相对于可视窗口向右50%的宽度,此时组件固定在可视窗口的正中。

margin-left:父组件宽度的50%:使组件固定在版心右侧,50%可以根据需求进行调整。

效果图:

CSS 固定定位:固定在版心右侧_第1张图片

你可能感兴趣的:(CSS,css,定位,html,html5)