l******0
发帖数: 244 | |
n*****t
发帖数: 22014 | |
l******0
发帖数: 244 | 3 Great. Thanks.
【在 n*****t 的大作中提到】
: input:focus { position : static; }
:
: layout
|
l******0
发帖数: 244 | 4 不太完全一样。这个框随着光标在顶部和原位置移动。我需要的是，一旦搜索框移动到
顶部，以后就一直呆在那里，当鼠标移动时，不再跑下来，除非用户关闭浏览器，重新
开始。
【在 n*****t 的大作中提到】
: input:focus { position : static; }
:
: layout
|
l******0
发帖数: 244 | |
n*****t
发帖数: 22014 | 6 基本上需要 js 了，原理大致就是改 position。
其实我也是一知半解，尤其定位元素 。。。。。。
【在 l******0 的大作中提到】
: 不太完全一样。这个框随着光标在顶部和原位置移动。我需要的是，一旦搜索框移动到
: 顶部，以后就一直呆在那里，当鼠标移动时，不再跑下来，除非用户关闭浏览器，重新
: 开始。
|
c******n
发帖数: 16666 | 7 恩 就是这样的
position改absolute
然后加一个top 0或者top 50， z-index也要改一下
讲究的还找一层半透明黑层盖住后面
弄完了再用js还原下去
【在 n*****t 的大作中提到】
: 基本上需要 js 了，原理大致就是改 position。
: 其实我也是一知半解，尤其定位元素 。。。。。。
|
n*****t
发帖数: 22014 | 8 还要把 parent 设成 relative：https://css-tricks.com/absolute-relative-fixed-
positioining-how-do-they-differ/
我觉得设计 css 的大概是文科 F2 傻妞，好多简单的东西让他们整迷糊了。。。
【在 c******n 的大作中提到】
: 恩 就是这样的
: position改absolute
: 然后加一个top 0或者top 50， z-index也要改一下
: 讲究的还找一层半透明黑层盖住后面
: 弄完了再用js还原下去
|
c******n
发帖数: 16666 | 9 恩 css很多东西 非掉坑不能理解
偏偏坑还特别特别多
fixed-
【在 n*****t 的大作中提到】
: 还要把 parent 设成 relative：https://css-tricks.com/absolute-relative-fixed-
: positioining-how-do-they-differ/
: 我觉得设计 css 的大概是文科 F2 傻妞，好多简单的东西让他们整迷糊了。。。
|
l******0
发帖数: 244 | 10 It turns out that, two CSSs do the job, without JavaScript.
#box, #button {
position: absolute;
top: 50%;
left: 50%;
margin-top: 5px;
-webkit-transition: top 2s; /* Safari */
transition: top 2s;
-webkit-transition-delay: 99999s; /* Safari */
transition-delay: 99999s;
}
#box:focus, #box:focus ~ #button {
position: absolute;
top: 0%;
left: 50%;
margin-top: 5px;
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
} |
l******0
发帖数: 244 | 11 这个在一个页面上 work, 但是当执行一次搜索后，搜索框又跑到中间去了。CSS 没错
，但是跟 html, 浏览器的交互可能有问题。
就是想模仿 google 的首页，搜索框最开始置于中央，但用户开始输入字符后，搜索框
就跑到上面去了，然后一直呆在上面。即使你搜索一次，也不变。我现在是当搜索一次
后，搜索结果在同一个页面显示，但搜索框又跑到中间去了。
google 这种效果怎么做的？ www.google.com
【在 l******0 的大作中提到】
: It turns out that, two CSSs do the job, without JavaScript.
: #box, #button {
: position: absolute;
: top: 50%;
: left: 50%;
: margin-top: 5px;
:
: -webkit-transition: top 2s; /* Safari */
: transition: top 2s;
: -webkit-transition-delay: 99999s; /* Safari */
|
n*****t
发帖数: 22014 | 12 比较靠谱的是 js，甚至可能需要 local storage 来记忆状态、保证页面刷新后还是在
需要的位置
【在 l******0 的大作中提到】
: 这个在一个页面上 work, 但是当执行一次搜索后，搜索框又跑到中间去了。CSS 没错
: ，但是跟 html, 浏览器的交互可能有问题。
: 就是想模仿 google 的首页，搜索框最开始置于中央，但用户开始输入字符后，搜索框
: 就跑到上面去了，然后一直呆在上面。即使你搜索一次，也不变。我现在是当搜索一次
: 后，搜索结果在同一个页面显示，但搜索框又跑到中间去了。
: google 这种效果怎么做的？ www.google.com
|
m***i
发帖数: 2480 | |
