Nano Hash - криптовалюты, майнинг, программирование

Относительный родитель, абсолютное позиционирование по вертикали в процентах?

Я пытаюсь создать вертикально расположенный DIV в процентах. У меня есть родительский контейнер, который нужно установить как относительный, а div содержимого - как абсолютный. Это отлично работает, когда я позиционирую div содержимого с пикселями, но когда я пробую проценты, проценты не учитываются:

.container {
position: relative;
}


.content {
position: absolute;
left: 10%;
top: 50%;
}


<div class="container"><div class="content"> This is the content div. It should be 10% from the left of the container div.
</div></div>

Блок содержимого отображается вверху страницы без учета 50% вертикального размещения. Что мне не хватает? Заранее спасибо!

css position
05.11.2012

Ответы:


1

Абсолютно позиционированный элемент извлекается из естественного потока документа, что означает, что ваш контейнер имеет нулевую высоту и ширину.

10% и 50% этой нулевой высоты и ширины, конечно же, равны нулю.

Если вы зададите своему контейнеру высоту и ширину, ваши процентные позиции начнут работать так, как вы хотите.

Вот рабочий пример.

.container { position: relative; width:500px; height:500px; }
05.11.2012
  • Работает как шарм! Большое спасибо! Но если мне нужен жидкий макет и установить высоту и ширину контейнера в процентах, это не сработает. В чем прикол? 06.11.2012
  • Вам нужно спросить, каковы ваши проценты. В этом случае они, скорее всего, будут относиться к телу, и если для тела не задана ширина или высота, и он не расширяется, чтобы соответствовать его содержимому, то снова вы имеете дело с x% от нуля. Вот рабочий пример, на который стоит обратить внимание: jsfiddle.net/CjC4W/1 06.11.2012
  • Просто здорово, я напишу ниже ваш комментарий. 24.06.2015

    • 2

    Welp, мой первый пост в SE. Для тех из вас, кто увидит это в будущем, вы можете фактически использовать высоту области просмотра как меру процента.

    .container {
    position: relative;
    top: 10vh;  // 10% of height from top of div
}
    09.01.2016

    3

    Скорее всего, вам нужно будет добавить height: 100% в свой .container div:

    .container { height: 100%; position: relative; }

    и, возможно, все элементы-предки:

    html, body { height: 100%; }
    05.11.2012
  • Спасибо за совет - к сожалению, не сработало. Есть ли какая-то базовая концепция, которую мне здесь не хватает, например, вы не можете вертикально позиционировать блоки div в процентах с AP внутри относительного родителя? 06.11.2012
  • @ user1801221 Нет, я так не думаю. Концепция прекрасна. У Джейми Диксона это работает. Я предполагаю, что у вас где-то есть элемент, из-за которого ваш .container не имеет нужной высоты. 06.11.2012

    • 4

    Ответ @Jaime Dixon был отличным. Прекрасные, там даны две замечательные концепции.

    1. Процент, относительные единицы относятся к ЧТО-ТО, вы должны понимать, что это за эталонный контейнер, для которого рассчитываются эти значения.

    2. Даже если у вас есть контейнер, МОЖЕТ БЫТЬ произвольное поведение, если контейнер имеет размеры как "авто". Итак, чтобы поведение было предсказуемым, убедитесь, что размер контейнера лучше, чем просто сказать «авто». ИЛИ, если ваш контейнер также имеет 100%, его родительский элемент и т. Д., Убедитесь, что у вас есть инструкция css, в которой вы указали высоту элементов html, body:

    пример:

    html, body {
    height: desired_value;
}
    24.06.2015
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..