我可以使用位置:垂直固定和位置:绝对水平吗?

编程入门 行业动态 更新时间:2024-10-26 04:19:51
本文介绍了我可以使用位置:垂直固定和位置:绝对水平吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

我在我的网页底部有一些文字说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.

更多推荐

我可以使用位置:垂直固定和位置:绝对水平吗?

本文发布于:2023-07-20 05:07:12,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1164484.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:位置   可以使用   水平

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!