CSS HTML position absolute

pytanie zadane 18 października 2022 w HTML i CSS przez EmilB Użytkownik (980 p.)

Witam, mam taki problem, gdy daje tło position: absolute, to nie mogę w ogóle nacisnąć linków, może ktoś pomóc jak to rozwiązać lub dać jakiś inny sposób na umieszczenie tła pod wszystkim.

https://ibb.co/Ssxk3SL

Pozdrawiam

<head>

	<title>www.x.pl</title>
	<link rel="stylesheet" href="css/style.css">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


</head>

<body>

	<div class="szerokosc">
		<div class="bg">

		</div>

<div class="belka">

	<a href="index.php">HOME</a>
	<a href="omnie.php">O MNIE</a>

</div>
	</div>

</body>

* {margin:0px; padding: 0px;}

body, html{
	background-color: #282828;
	font-family: Arial, Open Sans;
	width: 100%;
}



.szerokosc{
	width: 100%;
	overflow:hidden;
	margin: 0 auto;
}

/* KOMPUTERY */

@media (min-width: 950px) {

.bg{
	width: 1617px;
	height: 100%;
	right: 0;
	position: absolute;
	background-image: url("/ew/images/bg.png");
}

.belka{
	width: 70%;
	height: 100px;
	margin: 0 auto;
	margin-top: 50px;
}

.belka a{
	color: #ffffff;
	text-decoration: none;
}

.logo{
	background-image: url("/images/logo.png");
	width: 132px;
	height: 29px;
	position: relative;
	top: 40px;
}

}

/* TABLETY*/

@media (max-width: 950px) and (min-width:650px){



}

/* SMARTFONY */

@media (max-width: 650px) {



}

2 odpowiedzi

odpowiedź 18 października 2022 przez marcioq Początkujący (270 p.)

Dodaj z-index do klasy, powinno pomóc.

 .bg {
    z-index: -1;
  }

komentarz 18 października 2022 przez EmilB Użytkownik (980 p.)

Też próbowałem, nie działa.

odpowiedź 18 października 2022 przez VBService Ekspert (253,340 p.)
edycja 18 października 2022 przez VBService

Możesz dodać do klasy

.belka{
  position: relative;

  ...
}

lub jeśli to ma być tło dla .belka

  <div class="szerokosc">
    <div class="belka">

      <a href="index.php">HOME</a>
      <a href="omnie.php">O MNIE</a>

    </div>
  </div>

.belka{
  position: relative;
  width: 70%;
  height: 100px;
  margin: 0 auto;
  margin-top: 50px;
  background-image: url("/ew/images/bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

lub jako tło dla .szerokosc

<div class="szerokosc">
  <div class="belka">
 
    <a href="index.php">HOME</a>
    <a href="omnie.php">O MNIE</a>
 
  </div>
</div>

.szerokosc{
  width: 100%;
  overflow:hidden;
  margin: 0 auto;
  background-image: url("/ew/images/bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;    
}

P.S. Taki efekt

można też uzyskać za pomocą: linear-gradient [ 1 ] [ 2 ] (bez obrazka)

[ on-line ]

html,
body {
  height: 100%;
}
body {
  background-color: #24cba6;
  background-image: -webkit-linear-gradient(-65deg, #24cba6 0%, #24cba6 45%, #282828 45%);
  background-image: linear-gradient(-65deg, #24cba6 0%, #24cba6 45%, #282828 45%);
  background-repeat: no-repeat;
  background-size: cover;
}

komentarz 18 października 2022 przez EmilB Użytkownik (980 p.)

Przesyłam dwa zdjęcia, to przesunięte do prawej krawędzi jest dobrze, nie chodzi o to, żeby było na środku tylko do prawej i żeby było pod wszystkim - jako tło.