logo w określonym miejscu "nad" resztą divów - potrzebne wskazówki

logo w określonym miejscu "nad" resztą divów - potrzebne wskazówki
viGor
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 48
0

Witam , potrzebuje instrukcji jak ustawić div z logo , tak aby wyglądał jak ta domalowana na zielono elipsa(nie potrzebuje robić kształtu elipsy- to będzie koło), jednak nie wiem jak się za to zabrać.
Potrzebuje wskazówki jak to ustawić w tym miejscu , a resztę styli , obrazek zcy kształt dam radę zrobić.
Podsyłam HTML aby prościej było mi dać znać w którym miejscu ma byc div z logo.

Kopiuj
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="Style.css" type="text/css">

    <link href="https://fonts.googleapis.com/css?family=Staatliches&display=swap&subset=latin-ext" rel="stylesheet">


    <title>ViGor</title>


  </head>
  <body>
<div class="container">

 <div id="top">

  <div class="LOGO">VIGOR</div>

  <div class="TopTiles"><div class="content">Lorem Ipsum</div></div>
  <div class="TopTiles"><div class="content">Lorem Ipsum</div></div>
  <div class="TopTiles"><div class="content">Lorem Ipsum</div></div>
  <div class="TopTiles"><div class="content">Lorem Ipsum</div></div>
  <div style="clear:both;"></div>

  <div id="navbar"></div>

</div>

<div id="bottom">



  <div class="tile">
    <div id="photo1"></div>
    <div class="description"></div>
   </div>
  <div class="tile">
    <div id="photo2"></div>
    <div class="description"></div>
   </div>
  <div class="tile">
    <div id="photo3"></div>
    <div class="description"></div>
   </div>
  <div style="clear:both;"></div>

</div>

<div class="footer"></div>

</div>

  </body>
</html>![Bez nazwy-1.png](https://4programmers.net/uploads/attachment/5d/5d11f22205352.png)
Freja Draco
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 3394
0
Kopiuj
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: -999999;
viGor
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 48
0
Freja Draco napisał(a):
Kopiuj
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: -999999;

okej , a w którym miejscu HTML stworzyć element , któremu nadam style , które podałeś ?

Freja Draco
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 3394
0
viGor napisał(a):

okej , a w którym miejscu HTML stworzyć element , któremu nadam style , które podałeś ?

Np. przed końcem BODY.

viGor
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 48
0
Freja Draco napisał(a):
viGor napisał(a):

okej , a w którym miejscu HTML stworzyć element , któremu nadam style , które podałeś ?

Np. przed końcem BODY.

planuję aby strona była responsywna (dla ekranu komputera szerokość ustaliłem na 1050px), a co gdy ktoś będzie miał bardzo szeroki ekran , a większośc moich elementów ma szerokość ustawioną w % - w takim przypadku jeśli pozycja jest absolutna i ustalę konkretną odległość od krawędzi okna przeglądarki to (chyba) zmianie ulegnie pozycja elementu o którym mowa. Dobrze to rozumiem?

Freja Draco
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 3394
1
viGor napisał(a):

planuję aby strona była responsywna (dla ekranu komputera szerokość ustaliłem na 1050px), a co gdy ktoś będzie miał bardzo szeroki ekran , a większośc moich elementów ma szerokość ustawioną w % - w takim przypadku jeśli pozycja jest absolutna i ustalę konkretną odległość od krawędzi okna przeglądarki to (chyba) zmianie ulegnie pozycja elementu o którym mowa. Dobrze to rozumiem?

W zasadzie tak, ale można to obejść.
Możesz użyć % w top left right bottom, ew. połączyć go z jakimiś obliczeniami w calc,
możesz też ustawić wypozycjonowany absolutnie kontener szeroki na 100% i dopiero w nim wypozycjonować sobie logo.

Poza tym pozycjonowanie absolutne nie jest takie zupełnie absolutne:
absolute The element is positioned relative to its first positioned (not static) ancestor element
więc będzie liczone albo względem okna albo względem pierwszego rodzica z position innym niż static.

viGor
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 48
1
Freja Draco napisał(a):
viGor napisał(a):

planuję aby strona była responsywna (dla ekranu komputera szerokość ustaliłem na 1050px), a co gdy ktoś będzie miał bardzo szeroki ekran , a większośc moich elementów ma szerokość ustawioną w % - w takim przypadku jeśli pozycja jest absolutna i ustalę konkretną odległość od krawędzi okna przeglądarki to (chyba) zmianie ulegnie pozycja elementu o którym mowa. Dobrze to rozumiem?

W zasadzie tak, ale można to obejść.
Możesz użyć % w top left right bottom, ew. połączyć go z jakimiś obliczeniami w calc,
możesz też ustawić wypozycjonowany absolutnie kontener szeroki na 100% i dopiero w nim wypozycjonować sobie logo.

Poza tym pozycjonowanie absolutne nie jest takie zupełnie absolutne:
absolute The element is positioned relative to its first positioned (not static) ancestor element
więc będzie liczone albo względem okna albo względem pierwszego rodzica z position innym niż static.

Okej , coś poprubuję tak jak piszesz , dam znać jak idzie :D

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.