最近在做的一个页面，客户有个要求就是需要做一个分享按钮，然后Y轴位置固定，X需要跟随网页来改变（效果见https://huilang.me/project/zao/左侧分享）。
根据我以往的经验，感觉这种用css是完全做不来的，我所熟知的定位有fixed absolute relative貌似都不能满足以上效果。然后根据对方提供的一个js效果（见http://www.rickyh.co.uk/css-position-x-and-position-y/），想实现这个功能。但是那个js里面的demo并不是我们想要的，后面在无意中居然让我用css搞定了这个功能。
下面简单的列出主要的结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>纯css实现坐标Y固定 X移动效果</title>
<style type="text/css">
body,div{margin:0;padding:0}
.warpper{width: 980px;margin: 0 auto;overflow: hidden;background-color: #F1EAD7;height: 1000px;}
.fixed{position:fixed;bottom:50px;}
#share{position: absolute;*display: none;_dispaly:none;z-index: 9999999;left: -40px;bottom: 50px;}
@media screen and (max-width: 980px) {#share{display: none;}}
</style>
</head>
<body>
<div class="warpper">
<div class="fixed">
<div id="share" class="off">
<img src="https://huilang.me/project/zao/img/share.png">
</div>
</div>
</div>
</body>
</html> 这个并不是很完美，因为在宽度小于980px（上面我指定了）的时候，X轴位置就又开始变动了，只能用css把他隐藏了
有兴趣的朋友可以探讨下
css大神呀，我就差前端工程师的助攻了，来个助攻。哈哈
离大神差了太远了，只是喜欢折腾CSS而已
就像返回顶部，用来与浏览的边做距离，不就搞定了？
这就不是我要的效果啦 你换个大屏幕试试就知道了
我只有22寸的，没有更大的了。
你看我上面的demo网址 缩小浏览器屏幕模拟下小屏 对比下用2中方式的区别
我看2种，效果1样也。一个是js一个css
不一样的呢 左边的分享是根据固定在正文的背景框（注意背景的粗边位置） 右侧的分享是用fixed固定在网页的最右侧固尺寸 一个是会随浏览器大小改变位置 一个是不会的