Html 使顶部div固定

Im使用本机CSS和html（无jquery、无js、无引导）。 我设法使左列固定，并将滚动条放在顶部

现在，我希望在向下滚动时固定顶行（用红色标记）

谷歌电子数据表让它变得很好：

你可以玩这个：

.wrap{
宽度：100%；
}
.左栏，.右栏{
边框：实心1px#ffd6d6；
}
.符号{
线高：35px；
}
.路.山口{
线高：35px；
浮动：左；
}
.左栏{
宽度：250px；
浮动：左；
}
.右上校{
溢出-x：自动；
溢出y：隐藏；
空白：nowrap；
}
.头{
线高：35px；
字体大小：粗体；
}
.右栏.行.栏{
宽度：250px；
显示：内联块；
浮动：无；
}
.右栏，.右栏.行.栏{
变换：rotateX（180度）；
-ms变换：rotateX（180度）；/*IE 9*/
-webkit变换：rotateX（180度）；/*Safari和Chrome*/
}

符号固定
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
固定的
B固定
C固定
D固定
E固定
F固定
G固定
H固定
我修好了

首先，您使用变换：旋转（180度）有什么具体原因吗

要将一个元素“固定”到窗口中，可以使用css属性

position:fixed

为此，我添加了以下代码：

.head{
  line-height:35px;  /* was already here from your own code */
  font-weight:bold;  /* was already here from your own code */ 
  position:fixed;
  background:#fff;
  top:0;
}

这将把

.head

容器固定到顶部

还请注意，我已经移动了HTML的顺序，将

.head

行向上移动到

.symbol

容器下面。如果没有

position:fixed

这将消除使用

transform:rotate（180度）

的需要，到目前为止，我真的看不出背后的原因（？），因此我还删除了

transform:rotate（）

部分

我还将

margin top:36px

添加到

.right col

中，以“向下推”此容器，以确保

.head

元素不位于第一行上方，从而隐藏部分内容。我还将

边距顶部：-36px

添加到

。左列

以使其与

位置：固定

头部元素对齐

我做的最后一件事是删除

正文

（您没有明确地这样做，因此会从浏览器中自动添加）。否则，

top:0

将在左侧行和窗口顶部之间留下间隙

这里可以看到一个例子：

.wrap{
宽度：100%；
}
.左栏，.右栏{
边框：实心1px#ffd6d6；
}
.符号{
线高：35px；
}
.路.山口{
线高：35px；
浮动：左；
}
.左栏{
宽度：250px；
浮动：左；
页边距顶部：-36px；/*已添加此页边距*/
}
.右上校{
溢出-x：自动；
溢出y：隐藏；
空白：nowrap；
页边距顶部：36px；/*已添加此页边距*/
}
.头{
线高：35px；
字体大小：粗体；
位置：固定；
背景：白色；
排名：0；
}
身体{
保证金：0；
}
.右栏.行.栏{
宽度：250px；
显示：内联块；
浮动：无；
}

符号固定
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
欧元兑美元
固定的
B固定
C固定
D固定
E固定
F固定
G固定
H固定
我修好了
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我
A.
B
C
D
E
F
G
H
我