CSS div 固定定位

标签 css html positioning css-transitions fixed

我有一个 div,其中包含一个带有一些文本的较小 div。容器 div 有一个将它移出屏幕的 webkit 转换。我希望较小的 div 随之移动,直到它到达页面的边缘,然后保持固定,就好像它“卡在”页面的一侧一样,而容器 div 继续在其下方移动视线。这能做到吗?

//CSS
.move{
    -webkit-transition-property:left;
    -webkit-transition-timing-function:ease-in-out;
    -webkit-transition-duration:1s;
    left:-200px;
}

//HTML
<div onclick="this.className='move'">
     <div>
         some text here
     </div>
</div>

最佳答案

这是一个例子:http://jsfiddle.net/LjjRM/

几点:

1.) jQuery

2.) position:absolute

关于CSS div 固定定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6659606/

相关文章:

html - Firefox 显示主菜单和下拉菜单之间的差距,行高增加

javascript - Materialise 的 Parallax 导致 Boostrap 的 Modals/Collapse 在 Chrome 上消失

html - 单击时显示输入标题工具提示(不是悬停)

Chrome(webkit)和Firefox之间的jQuery定位差异

jquery - 将鼠标悬停在隐藏图像的图层上不起作用(IE9),适用于 firefox 和 chrome

css - ExtJS 6 - 将可调整大小的图像/ Logo 添加到顶部菜单

javascript - HTML5 的必填字段

html - 使用 CSS 定位元素的正确方法

html - VBScript:更改元素的 css

javascript - 如何让元素放置在负数位置时页面向左滚动?