Как установить нижний колонтитул ниже компонента с плавающей точкой? - PullRequest
Новая
       45

Как установить нижний колонтитул ниже компонента с плавающей точкой?

0 голосов
/ 04 мая 2019

У меня есть липкий нижний колонтитул в конце сети, но на одной странице, где я вставил канал 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>

И вот результат:

result

Чего я хочу добиться, так это чтобы нижний колонтитул находился под окном Twitter-фида

EDIT:

С ответом @Sathiraumesh результат будет:

result2

Предварительный просмотр, который я ищу, будет выглядеть примерно так:

preview

1 Ответ

1 голос
/ 04 мая 2019

удалите postion: 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>

также удалите position: sticky из нижнего колонтитула 

<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>

чтобы вывести окно твиттера впереди, добавьте 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>
...