Html 为Adobe Muse构建小部件，非常接近最终版本，可以'；我不明白为什么动画CSS属性没有到达div容器的顶部

标题几乎说明了一切，我是一个CSS和HTML的新手，已经做了大量的工作和研究，以迅速达到我今天的水平，我感到很困惑。不幸的是，我想我是StackOverflow的新手，现在还不能发布图片，你可以在上查看图片，这样你就可以看到Adobe Muse认为的顶部和盒子最终静止位置之间的差异……代码如下。如果有人不熟悉这个特定的设置，我将使用来自的编码术语和说明。非常感谢您的帮助。我会继续挖掘，如果我自己解决的话，会告诉你的。谢谢大家!

<?xml version="1.0" encoding="UTF-8"?>

<!--
Random line of text
-->

<HTMLWidget name="TMG Overlay Widget" formatNumber="3" localization="none" creator="Bryant Coffey" defaultWidth="640" defaultHeight="360" isResizable="true">

<parameters>
    <separator></separator>
    <info label="Sliding Box Color"/>
    <color name="BoxColor" label="Box Color" defaultValue="#b10000"/>
    <separator></separator>
    <info label="Global Opacity and Transition Parameters"/>
    <text name="GlobalOpacityTiming" label="Global Opacity Timing (s)" defaultValue=".5"/>
    <text name="SlidingBoxOpacityTiming" label="Sliding Box Opacity Timing" defaultValue=".2"/>
    <text name="SlidingBoxSpeed" label="Sliding Box Speed Timing (s)" defaultValue=".5"/>
    <text name="CaseStudyHoverSpeed" label="Case Study Text Hover Dissolve Speed (s)" defaultValue=".2"/>
    <separator></separator>
    <info label="Line 1 Text Options"/>
    <text name="Line1Text" label="Line 1 Text" defaultValue="Line 1 Text"/>
    <color name="Line1TextColor" label="Line 1 Font Color" defaultValue="#ffffff"/>
    <text name="Line1FontSize" label="Line 1 Font Size" defaultValue="30"/>
    <text name="Line1TopPosition" label="Line 1 Top Position" defaultValue="120"/>
    <text name="Line1LeftPosition" label="Line 1 Left Position" defaultValue="0"/>
    <separator></separator>
    <info label="Line 2 Text Options"/>
    <text name="Line2Text" label="Line 2 Text" defaultValue="Line 2 Text"/>
    <color name="Line2TextColor" label="Line 2 Font Color" defaultValue="#ffffff"/>
    <text name="Line2FontSize" label="Line 2 Font Size" defaultValue="13"/>
    <text name="Line2TopPosition" label="Line 2 Top Position" defaultValue="135"/>
    <text name="Line2LeftPosition" label="Line 2 Left Position" defaultValue="0"/>
    <separator></separator>
    <info label="Case Study Box Options"/>
    <text name="CaseStudyBoxText" label="Case Study Box Text" defaultValue="Case Study"/>
    <color name="CaseStudyInitialTextColor" label="Case Study Initial Font Color" defaultValue="#ffffff"/>
    <color name="CaseStudyHoverTextColor" label="Case Study Hover Font Color" defaultValue="#000000"/>
    <text name="CaseStudyTextTopPosition" label="Case Study Text V-Position" defaultValue="11"/>
    <color name="CaseStudyBoxColor" label="Case Study Box Color" defaultValue="#ffffff"/>
    <text name="CaseStudyBoxTextSize" label="Case Study Font Size" defaultValue="15"/>
    <text name="CaseStudyBoxTopPosition" label="Case Study Box Top Position" defaultValue="180"/>
    <text name="CaseStudyBoxLeftPosition" label="Case Study Box Left Position" defaultValue="200"/>
    <url name="CaseStudyURL" label="Case Study Button URL" defaultValue="http://www.tmgcreative.tv"/>
    <separator></separator>
    <info label="Background Image Selection"/>
    <file name="bgImage" label="Select a Background Image" filterLabel="Images" fileTypes="*.jpg;*.jpeg;*.png;*.gif" fileRequiredForOutput="True"/>
    <builtIn name="width"/>
    <builtIn name="height"/>


</parameters>

<pageItemHTML>
    <![CDATA[
    <style>

#container {
    width: {param_width}px;
    height: {param_height}px;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    overflow:hidden;    
}

#boxmodify {
  opacity: 0;
  width: {param_width}px;
  height: {param_height}px;
  background: #{param_BoxColor};
  position:relative;
  top: {param_height}px;
  -webkit-transition: height .25s, opacity {param_SlidingBoxOpacityTiming}s, top {param_SlidingBoxSpeed}s;
  -moz-transition: height .25s, opacity {param_SlidingBoxOpacityTiming}s, top {param_SlidingBoxSpeed}s;
  -o-transition: height .25s, opacity {param_SlidingBoxOpacityTiming}s, top {param_SlidingBoxSpeed}s;
  transition: height .25s, opacity {param_SlidingBoxOpacityTiming}s, top {param_SlidingBoxSpeed}s;
}

#casestudybox {
    opacity:0;
    width: 100px;
    height: 40px;
    background: transparent;
    border-style: solid;
    border-color: #ffffff;
    border-width: 2px;
    position:absolute;
    top:{param_CaseStudyBoxTopPosition}px;
    left:{param_CaseStudyBoxLeftPosition}px;
    z-index: 4;
    -webkit-transition: opacity {param_GlobalOpacityTiming}s, background {param_CaseStudyHoverSpeed}s;
    -moz-transition: opacity {param_GlobalOpacityTiming}s, background {param_CaseStudyHoverSpeed}s;
    -o-transition: opacity {param_GlobalOpacityTiming}s, background {param_CaseStudyHoverSpeed}s;
    transition: opacity {param_GlobalOpacityTiming}s, background {param_CaseStudyHoverSpeed}s;

}


#textLine1 {
    position: relative;
    top: {param_Line1TopPosition}px;
    left: {param_Line1LeftPosition}px;
    color: #{param_Line1TextColor};
    z-index:3;
    opacity:0;
    font-size:{param_Line1FontSize}px;
    -webkit-transition: opacity {param_GlobalOpacityTiming}s;
    -moz-transition: opacity {param_GlobalOpacityTiming}s;
    -o-transition: opacity {param_GlobalOpacityTiming}s;
    transition: opacity {param_GlobalOpacityTiming}s;
}

#textLine2 {
    position: relative;
    top: {param_Line2TopPosition}px;
    left: {param_Line2LeftPosition}px;
    font-size: {param_Line2FontSize}px;
    color: #{param_Line2TextColor};
    z-index:3;
    opacity:0;
    font-size:{param_Line2FontSize}px;
    -webkit-transition: opacity {param_GlobalOpacityTiming}s;
    -moz-transition: opacity {param_GlobalOpacityTiming}s;
    -o-transition: opacity {param_GlobalOpacityTiming}s;
    transition: opacity {param_GlobalOpacityTiming}s;
}

#caseStudyText {
    position:relative;
    top:{param_CaseStudyTextTopPosition}px; 
    color:#{param_CaseStudyInitialTextColor};
    font-size:{param_CaseStudyBoxTextSize}px;
    -webkit-transition: color {param_CaseStudyHoverSpeed}s; 
    -moz-transition: color {param_CaseStudyHoverSpeed}s;
    -o-transition: color {param_CaseStudyHoverSpeed}s;
    transition: color {param_CaseStudyHoverSpeed}s;
}

#container:hover #boxmodify{
  opacity: .5;
  top: 0px;
}

#container:hover #textLine1 {
    opacity: 1;
}

#container:hover #textLine2 {
    opacity: 1;
}

#container:hover #casestudybox {
    opacity: 1;
}
#casestudybox:hover {
    background: #ffffff;
}

#casestudybox:hover #caseStudyText {
    color: #{param_CaseStudyHoverTextColor};
}


</style>

<div id="container">
<center><div id="textLine1">{param_Line1Text}</div>
<div id="textLine2">{param_Line2Text}</div></center>
<div id="boxmodify"></div>
<div id="image" ><img src="{param_bgImage}" height="{param_height}" width="{param_width}""></img></div>
<a href="{param_CaseStudyURL}"><div id="casestudybox"><center><div id="caseStudyText">{param_CaseStudyBoxText}</div></center></div></a>
</div>
    ]]>
</pageItemHTML>

</HTMLWidget>

#容器{
宽度：{param_width}px；
高度：{param_height}px；
位置：绝对位置；
顶部：0px；
右：0px；
底部：0px；
左：0px；
溢出：隐藏；
}
#boxmodify{
不透明度：0；
宽度：{param_width}px；
高度：{param_height}px；
背景：#{param_BoxColor}；
位置：相对位置；
顶部：{param_height}px；
-webkit转换：高度.25s，不透明度{param_SlidingBoxOpacityMing}s，顶部{param_SlidingBoxSpeed}s；
-moz转换：高度.25s，不透明度{param_SlidingBoxOpacityMing}s，顶部{param_SlidingBoxSpeed}s；
-o型过渡：高度.25s，不透明度{param_slidingboxopacityming}s，顶部{param_SlidingBoxSpeed}s；
转换：高度.25s，不透明度{param_SlidingBoxOpacityMing}s，顶部{param_SlidingBoxSpeed}s；
}
#案例研究箱{
不透明度：0；
宽度：100px；
高度：40px；
背景：透明；
边框样式：实心；
边框颜色：#ffffff；
边框宽度：2倍；
位置：绝对位置；
顶部：{param_CaseStudyBoxTopPosition}px；
左：{param_CaseStudyBoxLeftPosition}px；
z指数：4；
-webkit转换：不透明度{param_GlobalOpacityTiming}，背景{param_casestudy}；
-moz转换：不透明度{param_GlobalOpacityTiming}，背景{param_casestudy}；
-o-转变：不透明度{param_GlobalOpacityTiming}，背景{param_casestudy}；
过渡：不透明度{param_GlobalOpacityTiming}，背景{param_casestudy}；
}
#文本行1{
位置：相对位置；
顶部：{param_line1t}px；
左：{param_Line1LeftPosition}px；
颜色：#{param_Line1TextColor}；
z指数：3；
不透明度：0；
字体大小：{param_Line1FontSize}px；
-webkit转换：不透明度{param_GlobalOpacityTiming}s；
-moz跃迁：不透明度{param_GlobalOpacityTiming}s；
-o-跃迁：不透明度{param_GlobalOpacityTiming}s；
过渡：不透明度{param_GlobalOpacityTiming}s；
}
#文本行2{
位置：相对位置；
顶部：{param_}px；
左：{param_Line2LeftPosition}px；
字体大小：{param_Line2FontSize}px；
颜色：#{param_Line2TextColor}；
z指数：3；
不透明度：0；
字体大小：{param_Line2FontSize}px；
-webkit转换：不透明度{param_GlobalOpacityTiming}s；
-moz跃迁：不透明度{param_GlobalOpacityTiming}s；
-o-跃迁：不透明度{param_GlobalOpacityTiming}s；
过渡：不透明度{param_GlobalOpacityTiming}s；
}
#案例研究文本{
位置：相对位置；
顶部：{param_CaseStudyTextTopPosition}px；
颜色：#{param_CaseStudyInitialTextColor}；
字体大小：{param_CaseStudyBoxTextSize}px；
-webkit转换：颜色{param_casestudy}s；
-moz转变：颜色{param_casestudy}s；
-o-转变：颜色{param_casestudy}s；
过渡：颜色{param_casestudy}s；
}
#容器：悬停#boxmodify{
不透明度：.5；
顶部：0px；
}
#容器：悬停#文本行1{
不透明度：1；
}
#容器：悬停#文本行2{
不透明度：1；
}
#容器：悬停#案例研究箱{
不透明度：1；
}
#案例研究框：悬停{
背景：#ffffff；
}
#casestudybox：悬停#caseStudyText{
颜色：#{param_casestudyOvertextColor}；
}
{param_Line1Text}
{param_Line2Text}
]]>

下面是帧的最终悬停状态的屏幕截图，这不在您的问题中。我不确定你能不能在你的代表级别做屏幕截图。试着包括一个链接到它。谢谢BSMP，就这样做了！