如何将一个html页面始终置于窗口的最前面

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将一个html页面始终置于窗口的最前面相关的知识，希望对你有一定的参考价值。

参考技术A

1、deskpin这款软件就可以实现这一功能。

2、打开deskpin，右击他在任务栏的图标，会弹出一系列选项。

3、我们点击“enter pin mode”，就是相当于打入一个图钉，然后我们在点击一下我们要置前的窗口，这样就完成了。

4、如果你又不想把这个窗口置前，只需要在点一下置前窗口上的红色图钉就可以了。

注意事项：

超级文本html标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。

即使更改窗口大小，如何将 div 置于页面中间？

【中文标题】即使更改窗口大小，如何将 div 置于页面中间？【英文标题】：How do I center a div in the middle of the page, even if I change the window size? 【发布时间】：2017-02-05 18:52:27 【问题描述】：

我尝试了here 上的所有解决方案，但都没有奏效。无论窗口大小如何，我都想将其水平和垂直居中。

注意：我有我想要的 container div。它围绕着其他几个 div。如果我调整this link 建议的更改，我的容器 div 就会混乱。我不想让这个响应。这是一个固定大小（想象一个图像），我只希望它始终位于窗口的中心，而不管窗口大小。

这是我所拥有的：

* 
  margin: 0;
  padding: 0;

#container 
  background-color: black;
  border-radius: 10px;
  padding: 5px;
  display: block;
  margin: auto;
  /* changed to auto, didn't make a difference*/
  border-width: 1px;
  border-color: black;
  border-style: solid;
  position: absolute;

.light 
  height: 100px;
  width: 100px;
  display: block;
  border-radius: 50%;
  margin: 10px;
  border-width: 5px;
  background-color: grey;

<body>
  <div id="container" onclick="changeColor()">
    <div id="green" class="light"></div>
    <div id="yellow" class="light"></div>
    <div id="red" class="light"></div>
  </div>
</body>

【问题讨论】：

Best way to center a <div> on a page vertically and horizontally?的可能重复 如果你在#container 上加上一个height 就相当简单了，尽管我知道这可能不是更可取的。 @the12 也试过了。 使用弹性盒子。它无处不在。 @atilkan 我不想让它响应或“灵活”。我只是希望它保持在中间。 【参考方案1】：

您也可以使用 Flexbox 执行此操作（我意识到您在评论中说您不需要这种“响应式”或“弹性”）。 Flexbox 将在中间得到这个“smack-dab”。需要居中的元素需要有一个父元素，其css如下：

.whatever-container 
    display: flex;
    align-items: center;
    justify-content: center;

在您的示例中，我将其包装在 div 中，类为 light-wrap。我还给了body 和html 100% 高度，以便.light-wrap 可以使用百分比值作为高度。如果您在下面运行代码片段，请确保在全屏模式下尝试以获得完整效果。 

* 
  margin: 0;
  padding: 0;


body, html 
  height:100%;


.light-wrap 
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* height is just to demonstrate  */
  background:#eee;


#container 
  background-color: black;
  border-radius: 10px;
  padding: 5px;
  display:inline-block;
  border: 1px solid black;


.light 
  height: 100px;
  width: 100px;
  display: block;
  border-radius: 50%;
  margin: 10px;
  border-width: 5px;
  background-color: grey;

<div class="light-wrap">
  <div id="container" onclick="changeColor()">

    <div id="green" class="light"></div>
    <div id="yellow" class="light"></div>
    <div id="red" class="light"></div>
  </div>
</div>

【讨论】：

【参考方案2】： 
<div class="shell">
  <div class="container">
    <div class="red">Red</div>
    <div class="green">Green</div>
    <div class="blue">Blue</div>
  </div>
</div>

css:

html, body 
  height: 100%;

.shell 
  height: 100%;
  margin: 0;
 text-align: center;
  width: 100%;


.shell:before 
  content: ' ';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;


.container 
  width: 100px;
  color: #fff;
  display: inline-block;
  margin: auto;
  vertical-align: middle;


.red 
  background: red;
  height: 100px;
  line-height: 100px;
  width: 100px;
  color: #fff;
  border-radius: 50%;
  margin-bottom: 10px;


.green 
  background: green;
  height: 100px;
  line-height: 100px;
  width: 100px;
  color: #fff;
  border-radius: 50%;
  margin-bottom: 10px;


.blue 
  background: blue;
  height: 100px;
  line-height: 100px;
  width: 100px;
  color: #fff;
  border-radius: 50%;

见小提琴：https://jsfiddle.net/wLpv9x2o/3/

编辑：这只是一种快速方法，根据您的需要设置样式

【讨论】：

【参考方案3】：

也许它不适合你，因为container 是绝对的，因此body 的高度为零。

    首先将height: 100% 添加到html 和body。

    对absolutely 定位的元素使用居中方法，使用transform 到container：

    top: 50%;
left: 50%;
transform: translate(-50%, -50%);

让我知道您对此的反馈。谢谢！

html,
body 
  height: 100%;

* 
  margin: 0;
  padding: 0;

#container 
  background-color: black;
  border-radius: 10px;
  padding: 5px;
  display: block;
  margin: 0 auto;
  border-width: 1px;
  border-color: black;
  border-style: solid;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

.light 
  height: 100px;
  width: 100px;
  display: block;
  border-radius: 50%;
  margin: 10px;
  border-width: 5px;
  background-color: grey;

<body>
  <div id="container" onclick="changeColor()">
    <div id="green" class="light"></div>
    <div id="yellow" class="light"></div>
    <div id="red" class="light"></div>
  </div>
</body>

【讨论】：

为什么要给html和body加高度？这是黑客吗？ 如果body 或任何容器的高度为零，则您没有什么可居中的。由于您的container 是绝对的，因此body 的高度为零 但是您可以看到，如果您删除高度，这也有效！ 那么变换呢？这是人们通常以事物为中心的方式还是黑客行为？ 这是在屏幕中居中绝对/固定定位项目的标准方法之一...

以上是关于如何将一个html页面始终置于窗口的最前面的主要内容，如果未能解决你的问题，请参考以下文章

如何将 PyQt QProcess 窗口置于前面？

如何找到活动的 PyQt 窗口并将其置于最前面

如何设置窗口在最前面?

如何将外部应用程序窗口置于顶部？ [复制]

即使更改窗口大小，如何将 div 置于页面中间？

CSS如何把DIV永远置于页面的底部？