我可以使用位置:垂直固定和位置:绝对水平吗? [英] Can i use position: fixed vertically and and position: absolute horizontally?

查看:128
本文介绍了我可以使用位置:垂直固定和位置:绝对水平吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在我的网页底部有一些文字说Built By Me。我有一个固定的位置35px远离窗口的底部和左边,所以它移动时你滚动。我实际想要的是垂直修复它,所以它移动,你上下滚动,总是35px远离窗口的底部,但它的位置35px远离页面的左边缘(不是屏幕),所以它在水平滚动时不会移动。我检查了此解决方案 Position元素垂直固定,水平绝对但它似乎不适用于我不幸的是。 FYI我目前正在使用以下代码来修正它的顶部和底部工作正常(但也移动,当你水平滚动):

  #sticky {
位置:固定;
bottom:35px;
left:35px;
width:206px;
padding:0;
font-size:0.6875em;
}

* html #sticky {
position:absolute;
bottom:0px;
}

< div id =sticky>
由Me
建立< / div>

感谢你能给我的任何指针,因为我不能为我的生活锻炼

解决方案

Dave

我相信唯一的方法是使用 position:fixed; 并在页面加载时计算 left 的值或通过确定页面的左边缘落在哪里,然后添加35px来调整大小。让我知道您是否愿意详细说明。


I have some text at the bottom of my page saying Built By Me in it. I have this in a fixed position 35px away from the bottom and left of the window so it moves as you scroll. What i actually want is to fix it vertically, so it moves as you scroll up and down and is always 35px away from the bottom of the window, but have it positioned 35px away from the left edge of the page (not screen) so it does not move when you scroll horizontally.I checked out this solution Position element fixed vertically, absolute horizontally but it does not seem to work for me unfortunately. FYI i am currently using the following code to fix it top and bottom which works fine (but also moves when you scroll horizontally):

#sticky {
position: fixed;
bottom: 35px;
left: 35px;
width: 206px;
padding: 0;
font-size: 0.6875em;
}

*html #sticky {
position: absolute;
bottom: 0px;
}

<div id="sticky">
Built by Me
</div>

Thanks so much for any pointers you could give as i can't for the life of me work out how to fix it on only one axis?

Dave

解决方案

I believe the only way to achieve this is to use position: fixed; and calculate the value of left on page load or resize by determining where the left edge of the "page" falls and then adding 35px to it. Let me know if you would like me to elaborate.

这篇关于我可以使用位置:垂直固定和位置:绝对水平吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆