Witam,
Mam dość złożony problem z pozycjonowaniem pewnego obiektu w HTML. Na stronie stworzyłem taki obiekt:
<div
class="Aplikacja2"
>
<div
class="PrzestrzeńP2 K1 PositionPowiadomienie"
>
<div
class="IkonaP2"
>
<img
src="Menu/Powiadomienia/Typy powiadomień/Połączenie przychodzące/Rock.png"
>
</div>
<div
class="StrefaP2"
>
<div
class="NazwaP2"
>
Amadeusz W.
</div>
<div
class="TreśćP2"
>
Telefon
</div>
</div>
<div
class="Ikona2P2 K13"
>
<img
src="Menu/Powiadomienia/Typy powiadomień/Połączenie przychodzące/Wiadomość.png"
>
</div>
<div
class="Ikona2P2 K14"
>
<img
src="Menu/Powiadomienia/Typy powiadomień/Połączenie przychodzące/Odrzuć.png"
>
</div>
<div
class="Ikona2P2 K15"
>
<img
src="Menu/Powiadomienia/Typy powiadomień/Połączenie przychodzące/Odbierz.png"
>
</div>
<div
class="Clear"
>
</div>
</div>
<div
class="Aplikacja K2"
>
<img
src="Foldery/Zwykły.png"
>
<div
class="Nazwa"
>
Centrum
</div>
</div>
</div>
Tak w skrócie, to ma to polegać na tym, że po najechaniu na pewnego diva na stronie, ma się w rogu ekranu wyświetlić takie powiadomienie. Powinno być ono w pozycji fixed i tak też się dzieje. Wyhchodzi ono dokładnie w miejscu, w którym powinno się to dziać. Tutaj css tego powiadomienia:
.PositionPowiadomienie
{
position: fixed;
top: 121px;
right: -500px;
z-index: 100;
transition: all 1s cubic-bezier(0.5, 0, 0.25, 1);
}
.Aplikacja2:hover > .PositionPowiadomienie
{
right: 15px;
}
Jednak, jeśli to powiadomienie, na dole ma powiedzmy inną aplikację maskującą (wypełniacz tego diva, który ma służyć do najeżdżania myszą, aby powiadomienie się wyświetliło), to całe powiadomienie nie dość, że powiększa stronę do miejsca w którym jest (poprzednie tego nie robiło i ładnie chowało się za krawędzią strony, gdy nie było potrzebne), to jeszcze w jakiś dziwny sposób pozycjonuje się gdzieś na dole strony. Tutaj kod tej drugiej wersji:
<div
class="Aplikacja2"
>
<div
class="PrzestrzeńP4 K11 PositionPowiadomienie"
>
<div
class="UrządzenieP4"
>
<img
src="Menu/Powiadomienia/Typy powiadomień/Nowe urządzenie/G604.png"
>
</div>
<div
class="StrefaP4"
>
<div
class="TytułP4"
>
Wykryto w pobliżu nowe urządzenie:
</div>
<div
class="TytułP4"
>
<b>Logitech G604 LIGHTSPEED</b>.
</div>
<div
class="TreśćP4"
>
Kliknij, aby połączyć.
</div>
</div>
<div
class="SymbolP4 K12"
>
<img
src="Menu/Powiadomienia/Symbole/Zamknij2.png"
>
</div>
<div
class="Clear"
>
</div>
</div>
<div
class="AplikacjaM2 K2"
>
<img
src="Aplikacje/34.png"
>
</div>
<div
class="Clear"
>
</div>
</div>
Nie mam pojęcia o co chodzi i dlaczego tak się dzieje. Nie widzę tu żadnego błędu. Jeśli do analizy będzie potrzebne cokolwiek więcej, to postaram się wysyłać w komentarzu. Nie robię tego tutaj, bo strona jest naprawdę duża i nie wiem co dokładnie było by potrzebne. Dodatkowo w tym w jakiś sposób zepsutym powiadomieniu nie działa poprawnie rozmycie tła, co nie występuje w ty pierwszym przypadku. Z góry dzięki wielkie, jeśli ktoś będzie wiedział o co tu chodzi. Dodam tylko, że jest to dla mnie naprawdę ważne, żeby to rozwiązać, bo hamuje to prace nad takim moim osobistym projektem.
