整个窗口的绝对位置

问题描述

我有以下问题:我有一个父亲 div，那个位置是相对的".在这个 div 中，我有 2 个儿子 div.第一个子 div 应该相对于父 div 定位.但是第二个子div应该定位到整个浏览器窗口.

我的 HTML 和 CSS:

#father{位置:相对；}#儿子1{位置:绝对；左:0;顶部:0；}#son2{位置:绝对；左:670；顶部:140；}

<div id='son1'></div><div id='son2'></div>

我现在的问题是，son2-div 也相对于父亲 div 定位.有没有可能告诉son2-div，它应该inerhit父亲的位置:相对"并使left和top对整个窗口绝对绝对?

我的问题是:我应该在一个非常大、复杂的 HTML 结构中更改它，因此我不可能更改 HTML 结构.

解决方案

第一次改动

#son2{位置:绝对；左:670；顶部:140；}

到

#son2{位置:固定；/*改为固定*/左:670像素；/*添加像素单位*/顶部:140px；/*添加像素单位*/}

结果:

#father{位置:相对；边距:40px 自动；宽度:200px；高度:200px；背景:红色}#儿子1{位置:绝对；左:0;顶部:0；宽度:20px；高度:20px；背景:黑色}#son2{位置:固定；左:70px；顶部:140px；宽度:200px；高度:200px；背景:绿色}

<div id='son1'></div><div id='son2'></div>

I have the following problem:I have a father-div, that's position is "relative". Inside this div I have 2 son-div's. The first son-div should be positioned relative to the father-div. But the second son-div should be positioned to the whole browser-window.

My HTML and CSS:

#father
{
  position:relative;
}
#son1
{
  position:absolute;
  left:0;
  top:0;
}
#son2
{
  position:absolute;
  left:670;
  top:140;
}

<div id='father'>
 <div id='son1'></div>
 <div id='son2'></div>
</div>

My problem now is, that the son2-div is also positioned relative to the father-div.Is there any possibility to tell the son2-div, that it should inerhit the "position:relative" of the father and make left and top absolutely absolute to the whole window?

My problem is: I should change this inside a very big, complex HTML-structure, so it's not possible for me to change the HTML-structure.

解决方案

First change

#son2
{
  position:absolute;
  left:670;
  top:140;
}

to

#son2
{
  position: fixed; /*change to fixed*/
  left:670px; /*add px units*/
  top:140px; /*add px units*/
}

Result:

#father
{
    position:relative;
    margin: 40px auto;
    width:200px;
    height: 200px;
    background: red
}
#son1
{
  position: absolute;
  left:0;
  top:0;

  width:20px;
    height: 20px;
    background: black
}
#son2
{
  position:fixed;
  left:70px;
  top:140px;
  width:200px;
  height: 200px;
  background: green
}

<div id='father'>
 <div id='son1'></div>
 <div id='son2'></div>
</div>

这篇关于整个窗口的绝对位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！