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

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.

<!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)
0 
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: -999999;
0
Freja Draco napisał(a):
  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ś ?

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.

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?

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.

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

1 użytkowników online, w tym zalogowanych: 0, gości: 1