#html #css #position
Вопрос:
Stackoverflow Я пытаюсь расположить стрелки «далее» и «до» всегда в верхней части боковой панели (заголовок боковой панели), однако не могу понять, как получить одинаковое положение как на настольных, так и на мобильных устройствах?
существующий код:
.prev, .next { cursor: pointer; position: absolute; padding: 16px; } .next { position: absolute; right: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); color: white; } .sidebar { display: inherit; grid-gap: inherit; } @media (min-width: 67.5em) and (max-width: 40em) { .sidebar { grid-template-columns: 1fr 1fr; 0 } } @media all and (min-width: 1353px) { .Gridcontainer { grid-template-columns: 2fr 1fr; } } @media all and (min-width: 1352px) { .sidebar { grid-auto-rows: 100%; grid-row: span 1; } } lt;div class="Gridcontainer"gt; lt;div class="Intro"gt; lt;video autoplay="" class="Videohack" loop=""gt; lt;source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"gt; lt;/videogt; lt;/divgt; lt;div class="sidebar"gt; lt;a class="prev" onclick="plusSlides(-1)"gt;❮lt;/agt; lt;a class="next" onclick="plusSlides(1)"gt;❯lt;/agt; Комментарии:
1. Можете ли вы подробнее ответить на свой вопрос, где расположена эта боковая панель по отношению к контенту?
2. Боковая панель расположена с левой стороны
Ответ №1:
Вы должны определить top для обеих кнопок, например 50% :
.prev, .next { cursor: pointer; position: absolute; top: 50%; /* this makes the difference */ ... Рабочий пример: (я добавил для демонстрации другой цвет для кнопок)
.prev, .next { cursor: pointer; position: absolute; top: 50%; /* this makes the difference */ padding: 16px; color: gray; /* just for demonstration */ } .next { right: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); color: white; } .sidebar { display: inherit; grid-gap: inherit; } @media (min-width: 67.5em) and (max-width: 40em) { .sidebar { grid-template-columns: 1fr 1fr; 0 } } @media all and (min-width: 1353px) { .Gridcontainer { grid-template-columns: 2fr 1fr; } } @media all and (min-width: 1352px) { .sidebar { grid-auto-rows: 100%; grid-row: span 1; } } lt;div class="Gridcontainer"gt; lt;div class="Intro"gt; lt;video autoplay="" class="Videohack" loop=""gt; lt;source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"gt; lt;/videogt; lt;/divgt; lt;div class="sidebar"gt; lt;a class="prev" onclick="plusSlides(-1)"gt;❮lt;/agt; lt;a class="next" onclick="plusSlides(1)"gt;❯lt;/agt; lt;/divgt; lt;/divgt;