как поставить картинке position: sticky;?

130
30 августа 2021, 01:20

Есть код, и надо к картинкам добавить position: sticky;, возможно ли это сделать? У меня лично не получается

html-код

<div style="position: sticky;"><img src="img/cats-32.jpg" class="infimg">

.infimg { 
	height: 130px; 
	width: 230px; 
	text-align: left; 
	padding-bottom: 10px; 
	padding-left: 900px; 
	cursor: pointer; 
	position: sticky; 
} 
 
.infimg:hover{ 
	filter: blur(2px); -webkit-filter: blur(2px); 
	position: sticky; 
} 
 
.infimginf { 
	height: 130px; 
	width: 230px; 
    text-align: right; 
	padding-bottom: 10px; 
	cursor: pointer; 
	padding-left: 10px; 
	position: sticky; 
} 
 
.infimginf:hover { 
	filter: blur(2px); -webkit-filter: blur(2px); 
	position: sticky; 
}

Если есть варианты, то пишите. (Браузер Google Chrome)

Answer 1

.infimg { 
	height: 130px; 
	width: 230px; 
	text-align: left; 
	padding-bottom: 10px; 
	padding-left: 200px; /*Для примера уменьшил с 900 */ 
	cursor: pointer; 
  border:1px solid red 
} 
 
.infimg:hover{ 
	filter: blur(2px); -webkit-filter: blur(2px); 
} 
 
.infimginf { 
	height: 130px; 
	width: 230px; 
    text-align: right; 
	padding-bottom: 10px; 
	cursor: pointer; 
	padding-left: 10px; 
   border:1px solid green 
} 
 
.infimginf:hover { 
	filter: blur(2px); -webkit-filter: blur(2px) 
}
    <p>Istam voluptatem perpetuam quis potest praestare sapienti? Quod non faceret, si in voluptate summum bonum poneret. Scrupulum, inquam, abeunti; Sed nimis multa. </p> 
 
    <p>Hic ambiguo ludimur. Certe, nisi voluptatem tanti aestimaretis. Non igitur bene. Dempta enim aeternitate nihilo beatior Iuppiter quam Epicurus; </p> 
 
    <p>Laboro autem non sine causa; Omnia peccata paria dicitis. Aufert enim sensus actionemque tollit omnem. Duo Reges: constructio interrete. </p> 
 
    <div style=" 
      position: -webkit-sticky; 
      position: sticky; 
      top: 0; 
      background-color: yellow; 
      padding: 50px; 
      font-size: 20px;"> 
      <img src="img/cats-32.jpg" class="infimg" alt="КАРТИНКА"> 
    </div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid dubitas igitur mutare principia naturae? Equidem e Cn. Quae sequuntur igitur? Quantum Aristoxeni ingenium consumptum videmus in musicis? </p> 
 
    <p>Teneo, inquit, finem illi videri nihil dolere. Si enim ad populum me vocas, eum. Sed nimis multa. Quis hoc dicit? Graece donan, Latine voluptatem vocant. Dici enim nihil potest verius. </p> 
 
    <div style=" 
      position: -webkit-sticky; 
      position: sticky; 
      top: 0; 
      background-color: #F984EF; 
      padding: 50px; 
      font-size: 20px;"> 
      <img src="img/cats-321.jpg" class="infimginf" alt="КАРТИНКА 2"> 
    </div> 
 
 
    <p>Istam voluptatem perpetuam quis potest praestare sapienti? Quod non faceret, si in voluptate summum bonum poneret. Scrupulum, inquam, abeunti; Sed nimis multa. </p> 
 
    <p>Hic ambiguo ludimur. Certe, nisi voluptatem tanti aestimaretis. Non igitur bene. Dempta enim aeternitate nihilo beatior Iuppiter quam Epicurus; </p> 
 
    <p>Laboro autem non sine causa; Omnia peccata paria dicitis. Aufert enim sensus actionemque tollit omnem. Duo Reges: constructio interrete. </p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid dubitas igitur mutare principia naturae? Equidem e Cn. Quae sequuntur igitur? Quantum Aristoxeni ingenium consumptum videmus in musicis? </p> 
 
    <p>Teneo, inquit, finem illi videri nihil dolere. Si enim ad populum me vocas, eum. Sed nimis multa. Quis hoc dicit? Graece donan, Latine voluptatem vocant. Dici enim nihil potest verius. </p> 
 
    <p>Istam voluptatem perpetuam quis potest praestare sapienti? Quod non faceret, si in voluptate summum bonum poneret. Scrupulum, inquam, abeunti; Sed nimis multa. </p> 
 
    <p>Hic ambiguo ludimur. Certe, nisi voluptatem tanti aestimaretis. Non igitur bene. Dempta enim aeternitate nihilo beatior Iuppiter quam Epicurus; </p> 
 
    <p>Laboro autem non sine causa; Omnia peccata paria dicitis. Aufert enim sensus actionemque tollit omnem. Duo Reges: constructio interrete. </p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid dubitas igitur mutare principia naturae? Equidem e Cn. Quae sequuntur igitur? Quantum Aristoxeni ingenium consumptum videmus in musicis? </p> 
 
    <p>Teneo, inquit, finem illi videri nihil dolere. Si enim ad populum me vocas, eum. Sed nimis multa. Quis hoc dicit? Graece donan, Latine voluptatem vocant. Dici enim nihil potest verius. </p> 
 
    <p>Istam voluptatem perpetuam quis potest praestare sapienti? Quod non faceret, si in voluptate summum bonum poneret. Scrupulum, inquam, abeunti; Sed nimis multa. </p> 
 
    <p>Hic ambiguo ludimur. Certe, nisi voluptatem tanti aestimaretis. Non igitur bene. Dempta enim aeternitate nihilo beatior Iuppiter quam Epicurus; </p> 
 
    <p>Laboro autem non sine causa; Omnia peccata paria dicitis. Aufert enim sensus actionemque tollit omnem. Duo Reges: constructio interrete. </p>

READ ALSO
Как правильно реализовать Lazy-loading для &lt;picture /&gt;

Как правильно реализовать Lazy-loading для <picture />

Использую тэг <picture /> для реализации fallback-механизма для WebP-изображений:

90
Автономный таймер 60 дней

Автономный таймер 60 дней

Как можно реализовать таймер на 60 дней, который начнет работать с момента создания, не зависимо, видел ли его посетитель?

85
Запрос к бд с CASE в C#

Запрос к бд с CASE в C#

Пытаюсь выгрузить данные из бд, но не работает оператор CASE, выдает вместо данных пустые ячейкиВ SQLiteStudio все правильно выгружает при данном...

82
Не получается разделить строки

Не получается разделить строки

Результат который хочу я:

196