Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/36.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 如何在浮动组件下面设置页脚?_Html_Css_Css Float_Footer_Sticky Footer - Fatal编程技术网

Html 如何在浮动组件下面设置页脚?

Html 如何在浮动组件下面设置页脚?,html,css,css-float,footer,sticky-footer,Html,Css,Css Float,Footer,Sticky Footer,我在网页的末尾有一个粘性的页脚,但是在一个我插入了Twitter提要的页面上,它不能像我所希望的那样工作。页脚遍历Twitter提要,而不是位于下方 这是文本和推特提要的代码: <div> <div style="float:left;width:80%;padding-right:20px"> La Plataforma de Prácticas Externas.. </div> <div style=

我在网页的末尾有一个粘性的页脚,但是在一个我插入了Twitter提要的页面上,它不能像我所希望的那样工作。页脚遍历Twitter提要,而不是位于下方

这是文本和推特提要的代码:

<div>   
    <div style="float:left;width:80%;padding-right:20px">
        La Plataforma de Prácticas Externas..
    </div>

    <div style="float:right;position:absolute;display:inline-block;">
        <a class="twitter-timeline" data-lang="es" data-width="300" data-height="800" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>  
</div>

外部政治平台。。
这是页脚的代码:

<div  align="center" style="position: sticky;width: 100%;bottom: 0%;clear: both;padding-top: 20px;">
    <hr />
    <p class="small">Copyright &copy; <fmt:formatDate value="${date}" pattern="yyyy" /> Footer </b>
</div>


版权和副本;页脚

这就是结果:

我想要实现的是页脚位于Twitter提要框的下方

编辑:

对于@Sathiraumesh,答案是:

我想要的预览是这样的:


从应用程序中删除此代码中的
position:absolute

<div style="float:right;position:absolute;display:inline-block;">
        <a class="twitter-timeline" data-lang="es" data-width="300" data-height="800" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>
要将twitter框放在前面,请在twitter框中添加
z-index:3

<div style="z-index:3;float:right;position:absolute;display:inline-block;">
        <a class="twitter-timeline" data-lang="es" data-width="300" data-height="800" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>


Twitter框位于文本下方和右侧,无论我是否滚动删除属性position:sticky from the footer此处有一些改进,页脚始终可见于屏幕末尾。页脚现在已经结束了,但是Twitter框仍然在文本下面。你可以给我发送一个预览吗?也许你可以使用z-index:3属性将Twitter框放在文本前面
<div style="z-index:3;float:right;position:absolute;display:inline-block;">
        <a class="twitter-timeline" data-lang="es" data-width="300" data-height="800" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>