Как заставить даже абсолютно позиционированные дочерние элементы в пределах родительского элемента

Question

Как заставить дочерние html-элементы внутри границ родительского элемента , чтобы даже абсолютно позиционированные дочерние элементы все еще оставались в границах (или обрезались) родительского элемента.

Я делаю это, потому что хочу запретить авторам дочернего содержимого"Переопределение содержимого моей страницы" абсолютно позиционированными элементами.

Я не хочуиспользуйте iframe.Мое лучшее решение состоит в том, чтобы использовать javascript, чтобы найти все дочерние элементы с положением стиля, установленным на «absolute» или «fixed», и преобразовать их в «static», как бы мне ни понравился лучший подход, предпочтительно не javascript.Любая помощь - это хорошая помощь.

Примечание: установка style = "position: относительный;" для родительского элемента разрешает его только для дочерних элементов с style = "position: absolute;", а не style = "position: fixed;"

Answer 1

если родительский элемент имеет положение: относительный набор, любые дочерние элементы с позицией: абсолютный будут расположены в пределах родительского элемента.

, поэтому:

<div style="position:relative; width:400px; height:400px;">
    <div style="position:absolute; left:190px; top:190px; width:20px; height:20px;">
</div>

дастВы квадрат 20px, абсолютно позиционированный в границах квадрата 400px.

Если вы хотите обрезать, вам, вероятно, придется использовать overflow: hidden и, возможно, поиграть с z-индексами.div, которые вы хотите вырезать, могут иметь z-index: -1.