用 css 覆盖元素组

Question

我正在尝试让文本在矩阵背景前的屏幕上流动。当我尝试它时，选取框将矩阵背景向下推，并留下令人讨厌的黑色 space。我正在尝试放置矩阵（div 列）以便它们到达页面顶部，但位于选取框后面。我尝试过 css 绝对定位，但我一定是做错了什么……这是我目前的代码。

<html>
<head>
<HTA:APPLICATION  
APPLICATIONNAME="Matrix"  
VERSION="1.0.0.0" 
AUTHOR="Someone"

BORDER="none"  
INNERBORDER="no"  
CAPTION="no"  
SYSMENU="no"  
MAXIMIZEBUTTON="no"  
MINIMIZEBUTTON="no"  
ICON="NO"  
SCROLL="no"  
SCROLLFLAT="yes"  
SINGLEINSTANCE="yes"  
WINDOWSTATE="maximize"  
SHOWINTASKBAR="no"  
CONTEXTMENU="no"  
SELECTION="no"/> 

<title>Matrix © 2017</title>
<style type="text/css">
body{
 background-color: black; 
 color: DarkSlateGray; 
 font-size: 20px;
}
div{
 width: 20px; 
 float: left;
}
</style>

<font color="#FF0000" size="+3"><marquee>Marquee Text Here</marquee></font>

<script language="vbscript">

Public n, iTimerID, MyTitle, colnum, carset
ReDim M(1,1)
ReDim SpecCar(64)
SpecCar(0)="&permil;" 
SpecCar(1)="&fnof;"   : SpecCar(11)="&Omega;"   : SpecCar(21)="&lambda;" : SpecCar(31)="&phi;"
SpecCar(2)="&Gamma;"  : SpecCar(12)="&alpha;"   : SpecCar(22)="&mu;"     : SpecCar(32)="&psi;"
SpecCar(3)="&Delta;"  : SpecCar(13)="&beta;"    : SpecCar(23)="&nu;"     : SpecCar(33)="&omega;"
SpecCar(4)="&Theta;"  : SpecCar(14)="&delta;"   : SpecCar(24)="&xi;"     : SpecCar(34)="&trade;"
SpecCar(5)="&Lambda;" : SpecCar(15)="&epsilon;" : SpecCar(25)="&pi;"     : SpecCar(35)="&larr;"
SpecCar(6)="&Xi;"     : SpecCar(16)="&zeta;"    : SpecCar(26)="&rho;"    : SpecCar(36)="&uarr;"
SpecCar(7)="&Pi;"     : SpecCar(17)="&eta;"     : SpecCar(27)="&sigmaf;" : SpecCar(37)="&rarr;"
SpecCar(8)="&Sigma;"  : SpecCar(19)="&iota;"    : SpecCar(29)="&tau;"    : SpecCar(39)="&harr;"
SpecCar(10)="&Psi;"   : SpecCar(20)="&kappa;"   : SpecCar(30)="&upsilon;": SpecCar(40)="&radic;"
SpecCar(41)="&infin;" : SpecCar(46)="&there4;"  : SpecCar(51)="&ge;"     : SpecCar(56)="&clubs;"
SpecCar(42)="&ang;"   : SpecCar(47)="&asymp;"   : SpecCar(52)="&oplus;"  : SpecCar(57)="&hearts;"
SpecCar(43)="&cap;"   : SpecCar(48)="&ne;"      : SpecCar(53)="&perp;"   : SpecCar(58)="&diams;"
SpecCar(44)="&cup;"   : SpecCar(49)="&equiv;"   : SpecCar(54)="&loz;"    : SpecCar(59)="&OElig;"
SpecCar(45)="&int;"   : SpecCar(50)="&le;"      : SpecCar(55)="&spades;" : SpecCar(60)="&dagger;"
SpecCar(61)="&Dagger;": SpecCar(62)="&euro;"    : SpecCar(63)="&oelig;"  : SpecCar(64)="&Scaron;"

Sub window_onLoad()
 n=48
 colnum=100
 carset=1
 ReDim M(colnum,1)
 ' Set a random number for the first character 
 ' to be written on the screen for each column 
 ' (div). This is useful to avoid all the
 ' column to start at the same place 
    For i=1 To colnum
  Randomize           '---This formula doesn't accept variables
  M(i,0) = Int(n*Rnd)        '--- M(i,0) contains the number of the character to be written
  t=""
             '--- Fill the column with white space
  For j=1 To n
   t = t & "&nbsp;<br>"
  Next
    M(i,1) = t           '--- M(i,1) contains the html of the column
    Next
 iTimerID = window.setInterval("Progress", 300)
End Sub

Sub Progress
 For i=1 To colnum
  l = Split(M(i,1), "<br>")      '--- split by each character in the column
  cpos = M(i,0)         '--- position of the character to be written on the screen at this time
             '--- write a random ascii or a character from the array 
  Randomize
  If Int(carset)=1 Then
   l(cpos) = "<span style=""color:GreenYellow"">" & Chr( 32 + Int(223*Rnd) ) & "</span>"
   carset = carset +0.25
  ElseIf Int(carset)=2 Then
   l(cpos) = "<span style=""color:GreenYellow"">" & SpecCar( Int(64*Rnd) )  & "</span>"
   carset = 1
  End If
             '--- scale down to dark the previous characters
  y=-1
  For j = cpos-1 To cpos-11 Step -1
   tempj = j
   If j < 0 Then         '--- when we start from the top, darken characters at the bottom
    j = UBound(l) +j +1
   End If
   y=y+1
   Select Case y
    Case 0 color="LawnGreen"
    Case 1 color="LawnGreen"
    Case 2 color="LimeGreen"
    Case 3 color="LimeGreen"
    Case 4 color="ForestGreen"
    Case 5 color="ForestGreen"
    Case 6 color="Green"
    Case 7 color="Green"
    Case 8 color="DarkGreen"
    Case 9 color="DarkGreen"
    Case 10 color=""
    End Select
   clj = l(j)
   If InStr(1, clj, "<span", 1)>0 Then  '--- isolate the character from the span tag
    clj = Left(clj, InStrRev(clj, "<") -1)
    clj = Mid(clj, InStr(clj, ">") +1)
   End If
   If color <> "" Then       '--- set a span with a color style only if necessary
    l(j) = "<span style=""color:" & color & """>" & clj & "</span>"
   Else
    l(j) = clj
   End If
   j = tempj
  Next
  t = Join(l, "<br>")
  M(i,1) = t          '--- M(i,1) contains the html of the column
  cpos = cpos +1
  If cpos > UBound(l) Then
   cpos = 0
  End If
  M(i,0) = cpos          '--- M(i,0) contains the number of the character to be written
  id("col" & i).innerHTML = t      '--- Show the result for this the column on the screen
    Next
End Sub

Sub ExitMatrix
 window.clearInterval(iTimerID)      '---You must always clear the intervals before leaving
 window.close
End Sub

Function id(o)
 Set id = document.getElementById(o)
End Function

</script>
</head>
<body>

<div id="col1"></div><div id="col26"></div><div id="col51"></div><div id="col76"></div>
<div id="col2"></div><div id="col27"></div><div id="col52"></div><div id="col77"></div>
<div id="col3"></div><div id="col28"></div><div id="col53"></div><div id="col78"></div>
<div id="col4"></div><div id="col29"></div><div id="col54"></div><div id="col79"></div>
<div id="col5"></div><div id="col30"></div><div id="col55"></div><div id="col80"></div>
<div id="col6"></div><div id="col31"></div><div id="col56"></div><div id="col81"></div>
<div id="col7"></div><div id="col32"></div><div id="col57"></div><div id="col82"></div>
<div id="col8"></div><div id="col33"></div><div id="col58"></div><div id="col83"></div>
<div id="col9"></div><div id="col34"></div><div id="col59"></div><div id="col84"></div>
<div id="col10"></div><div id="col35"></div><div id="col60"></div><div id="col85"></div>
<div id="col11"></div><div id="col36"></div><div id="col61"></div><div id="col86"></div>
<div id="col12"></div><div id="col37"></div><div id="col62"></div><div id="col87"></div>
<div id="col13"></div><div id="col38"></div><div id="col63"></div><div id="col88"></div>
<div id="col14"></div><div id="col39"></div><div id="col64"></div><div id="col89"></div>
<div id="col15"></div><div id="col40"></div><div id="col65"></div><div id="col90"></div>
<div id="col16"></div><div id="col41"></div><div id="col66"></div><div id="col91"></div>
<div id="col17"></div><div id="col42"></div><div id="col67"></div><div id="col92"></div>
<div id="col18"></div><div id="col43"></div><div id="col68"></div><div id="col93"></div>
<div id="col19"></div><div id="col44"></div><div id="col69"></div><div id="col94"></div>
<div id="col20"></div><div id="col45"></div><div id="col70"></div><div id="col95"></div>
<div id="col21"></div><div id="col46"></div><div id="col71"></div><div id="col96"></div>
<div id="col22"></div><div id="col47"></div><div id="col72"></div><div id="col97"></div>
<div id="col23"></div><div id="col48"></div><div id="col73"></div><div id="col98"></div>
<div id="col24"></div><div id="col49"></div><div id="col74"></div><div id="col99"></div>
<div id="col25"></div><div id="col50"></div><div id="col75"></div><div id="col100"></div>

<embed src="don.mp3" autostart="true" loop="true">  
</body>
</html>

Answer 1

您关于使用 position: absolute 的说法是正确的。将此代码添加到您的 css:

marquee {
  position: absolute;
}

如评论中所述，这是一些非常古老的代码。 maquee 位于一个标签内，该标签已经被描述了十年或更长时间。祝你好运....

body{
 background-color: black; 
 color: DarkSlateGray; 
 font-size: 20px;
}
div{
 width: 20px; 
 float: left;
}
marquee {
  position: absolute;
}

<html>
<head>
<HTA:APPLICATION  
APPLICATIONNAME="Matrix"  
VERSION="1.0.0.0" 
AUTHOR="Someone"

BORDER="none"  
INNERBORDER="no"  
CAPTION="no"  
SYSMENU="no"  
MAXIMIZEBUTTON="no"  
MINIMIZEBUTTON="no"  
ICON="NO"  
SCROLL="no"  
SCROLLFLAT="yes"  
SINGLEINSTANCE="yes"  
WINDOWSTATE="maximize"  
SHOWINTASKBAR="no"  
CONTEXTMENU="no"  
SELECTION="no"/> 

<title>Matrix © 2017</title>

<font color="#FF0000" size="+3"><marquee>Marquee Text Here</marquee></font>

<script language="vbscript">

Public n, iTimerID, MyTitle, colnum, carset
ReDim M(1,1)
ReDim SpecCar(64)
SpecCar(0)="&permil;" 
SpecCar(1)="&fnof;"   : SpecCar(11)="&Omega;"   : SpecCar(21)="&lambda;" : SpecCar(31)="&phi;"
SpecCar(2)="&Gamma;"  : SpecCar(12)="&alpha;"   : SpecCar(22)="&mu;"     : SpecCar(32)="&psi;"
SpecCar(3)="&Delta;"  : SpecCar(13)="&beta;"    : SpecCar(23)="&nu;"     : SpecCar(33)="&omega;"
SpecCar(4)="&Theta;"  : SpecCar(14)="&delta;"   : SpecCar(24)="&xi;"     : SpecCar(34)="&trade;"
SpecCar(5)="&Lambda;" : SpecCar(15)="&epsilon;" : SpecCar(25)="&pi;"     : SpecCar(35)="&larr;"
SpecCar(6)="&Xi;"     : SpecCar(16)="&zeta;"    : SpecCar(26)="&rho;"    : SpecCar(36)="&uarr;"
SpecCar(7)="&Pi;"     : SpecCar(17)="&eta;"     : SpecCar(27)="&sigmaf;" : SpecCar(37)="&rarr;"
SpecCar(8)="&Sigma;"  : SpecCar(19)="&iota;"    : SpecCar(29)="&tau;"    : SpecCar(39)="&harr;"
SpecCar(10)="&Psi;"   : SpecCar(20)="&kappa;"   : SpecCar(30)="&upsilon;": SpecCar(40)="&radic;"
SpecCar(41)="&infin;" : SpecCar(46)="&there4;"  : SpecCar(51)="&ge;"     : SpecCar(56)="&clubs;"
SpecCar(42)="&ang;"   : SpecCar(47)="&asymp;"   : SpecCar(52)="&oplus;"  : SpecCar(57)="&hearts;"
SpecCar(43)="&cap;"   : SpecCar(48)="&ne;"      : SpecCar(53)="&perp;"   : SpecCar(58)="&diams;"
SpecCar(44)="&cup;"   : SpecCar(49)="&equiv;"   : SpecCar(54)="&loz;"    : SpecCar(59)="&OElig;"
SpecCar(45)="&int;"   : SpecCar(50)="&le;"      : SpecCar(55)="&spades;" : SpecCar(60)="&dagger;"
SpecCar(61)="&Dagger;": SpecCar(62)="&euro;"    : SpecCar(63)="&oelig;"  : SpecCar(64)="&Scaron;"

Sub window_onLoad()
 n=48
 colnum=100
 carset=1
 ReDim M(colnum,1)
 ' Set a random number for the first character 
 ' to be written on the screen for each column 
 ' (div). This is useful to avoid all the
 ' column to start at the same place 
    For i=1 To colnum
  Randomize           '---This formula doesn't accept variables
  M(i,0) = Int(n*Rnd)        '--- M(i,0) contains the number of the character to be written
  t=""
             '--- Fill the column with white space
  For j=1 To n
   t = t & "&nbsp;<br>"
  Next
    M(i,1) = t           '--- M(i,1) contains the html of the column
    Next
 iTimerID = window.setInterval("Progress", 300)
End Sub

Sub Progress
 For i=1 To colnum
  l = Split(M(i,1), "<br>")      '--- split by each character in the column
  cpos = M(i,0)         '--- position of the character to be written on the screen at this time
             '--- write a random ascii or a character from the array 
  Randomize
  If Int(carset)=1 Then
   l(cpos) = "<span style=""color:GreenYellow"">" & Chr( 32 + Int(223*Rnd) ) & "</span>"
   carset = carset +0.25
  ElseIf Int(carset)=2 Then
   l(cpos) = "<span style=""color:GreenYellow"">" & SpecCar( Int(64*Rnd) )  & "</span>"
   carset = 1
  End If
             '--- scale down to dark the previous characters
  y=-1
  For j = cpos-1 To cpos-11 Step -1
   tempj = j
   If j < 0 Then         '--- when we start from the top, darken characters at the bottom
    j = UBound(l) +j +1
   End If
   y=y+1
   Select Case y
    Case 0 color="LawnGreen"
    Case 1 color="LawnGreen"
    Case 2 color="LimeGreen"
    Case 3 color="LimeGreen"
    Case 4 color="ForestGreen"
    Case 5 color="ForestGreen"
    Case 6 color="Green"
    Case 7 color="Green"
    Case 8 color="DarkGreen"
    Case 9 color="DarkGreen"
    Case 10 color=""
    End Select
   clj = l(j)
   If InStr(1, clj, "<span", 1)>0 Then  '--- isolate the character from the span tag
    clj = Left(clj, InStrRev(clj, "<") -1)
    clj = Mid(clj, InStr(clj, ">") +1)
   End If
   If color <> "" Then       '--- set a span with a color style only if necessary
    l(j) = "<span style=""color:" & color & """>" & clj & "</span>"
   Else
    l(j) = clj
   End If
   j = tempj
  Next
  t = Join(l, "<br>")
  M(i,1) = t          '--- M(i,1) contains the html of the column
  cpos = cpos +1
  If cpos > UBound(l) Then
   cpos = 0
  End If
  M(i,0) = cpos          '--- M(i,0) contains the number of the character to be written
  id("col" & i).innerHTML = t      '--- Show the result for this the column on the screen
    Next
End Sub

Sub ExitMatrix
 window.clearInterval(iTimerID)      '---You must always clear the intervals before leaving
 window.close
End Sub

Function id(o)
 Set id = document.getElementById(o)
End Function

</script>
</head>
<body>

<div id="col1"></div><div id="col26"></div><div id="col51"></div><div id="col76"></div>
<div id="col2"></div><div id="col27"></div><div id="col52"></div><div id="col77"></div>
<div id="col3"></div><div id="col28"></div><div id="col53"></div><div id="col78"></div>
<div id="col4"></div><div id="col29"></div><div id="col54"></div><div id="col79"></div>
<div id="col5"></div><div id="col30"></div><div id="col55"></div><div id="col80"></div>
<div id="col6"></div><div id="col31"></div><div id="col56"></div><div id="col81"></div>
<div id="col7"></div><div id="col32"></div><div id="col57"></div><div id="col82"></div>
<div id="col8"></div><div id="col33"></div><div id="col58"></div><div id="col83"></div>
<div id="col9"></div><div id="col34"></div><div id="col59"></div><div id="col84"></div>
<div id="col10"></div><div id="col35"></div><div id="col60"></div><div id="col85"></div>
<div id="col11"></div><div id="col36"></div><div id="col61"></div><div id="col86"></div>
<div id="col12"></div><div id="col37"></div><div id="col62"></div><div id="col87"></div>
<div id="col13"></div><div id="col38"></div><div id="col63"></div><div id="col88"></div>
<div id="col14"></div><div id="col39"></div><div id="col64"></div><div id="col89"></div>
<div id="col15"></div><div id="col40"></div><div id="col65"></div><div id="col90"></div>
<div id="col16"></div><div id="col41"></div><div id="col66"></div><div id="col91"></div>
<div id="col17"></div><div id="col42"></div><div id="col67"></div><div id="col92"></div>
<div id="col18"></div><div id="col43"></div><div id="col68"></div><div id="col93"></div>
<div id="col19"></div><div id="col44"></div><div id="col69"></div><div id="col94"></div>
<div id="col20"></div><div id="col45"></div><div id="col70"></div><div id="col95"></div>
<div id="col21"></div><div id="col46"></div><div id="col71"></div><div id="col96"></div>
<div id="col22"></div><div id="col47"></div><div id="col72"></div><div id="col97"></div>
<div id="col23"></div><div id="col48"></div><div id="col73"></div><div id="col98"></div>
<div id="col24"></div><div id="col49"></div><div id="col74"></div><div id="col99"></div>
<div id="col25"></div><div id="col50"></div><div id="col75"></div><div id="col100"></div>

<embed src="don.mp3" autostart="true" loop="true">  
</body>
</html>

用 css 覆盖元素组

Overlaying groups of elements with css

html

css

hta