标签: css-position

我正在尝试修复屏幕顶部的卡片。我正在尝试这样做，<ion-content>但经过多次尝试后我没有解决它。我试过ion-fixed，但它也不起作用。

我想修复这部分代码：

<ion-card text-center>
   <ion-card-content>
      <h5 style=" font-size: 180%;"> {{selectedItem | noneSelectedItem}}
      </h5>
   </ion-card-content>
</ion-card>

然后，它遵循一个列表：

<ion-card style="background-color:rgb(177, 55, 47);" >
   <br>
   <p class="titleCard">Lista de la carta</p>
   <ion-card-content>
      <ion-list class="accordion-list" >
         <!-- First Level -->
         <ion-list-header *ngFor="let item of information; let i = index" no-lines no-padding>
           <!-- Toggle Button -->
           <button ion-item (click)="toggleSection(i)" detail-none [ngClass]="{'section-active': item.open, 'section': !item.open}">
             <ion-icon item-left name="arrow-forward" *ngIf="!item.open"></ion-icon>
             <ion-icon item-left name="arrow-down" *ngIf="item.open"></ion-icon>
             {{ item.name }}
           </button>
      etc...

所以我的疑问是如何在滚动列表时修复第一张卡片。

非常感谢。

我的位置有点问题：绝对。让我解释。

悬停后我有这样的事情：

CSS代码：

.option {
    width: 50px;
    height: 50px;
    box-shadow: 1px 1px 1px 1px  #888;
}

.option:hover {
    transform: scale(2.25, 2.25);
    transition-duration: 0.01s;
    z-index:10;
    position: absolute;
}

将鼠标悬停在选项上后，我使用 transform: scale 来放大元素。但是，为了达到预期的效果，我必须添加position: absolute属性 - 这样，该选项在悬停后从 div 中消失。悬停工作正常，但其余 3 个选项向左 - 有什么办法可以解决这个问题吗？我想在悬停后仍显示 4 个选项，而不是剪切其余选项。

没有position:absolute元素就不会离开 div。

我在容器中有一个固定的块元素。滚动时，固定定位的元素超出了容器。我知道固定元素将根据窗口 vw 定位。但是有什么方法可以确保固定定位的元素只会滚动到容器位置。固定位置元素不应超出容器

问题如下所示。

https://codepen.io/anon/pen/dKLByX

我尝试使用以下方法解决问题：

if($(window).scrollTop()>1900){
    $('.fixed-ct').css({'bottom':'200px','top':'auto'});
}else if($(document).scrollTop() <=100) {
    $('.fixed-ct').css({'top':'10px','bottom':'auto'});
}else {
    $('.fixed-ct').css({'top':'0px','bottom':'auto'});
}

但有时固定容器在末尾，因为底部 200px 它应该在顶部使用 top:0px 滚动并且它应该在容器本身内部。

当您在 CKEditor 5 classic 中添加长内容时，滚动时工具栏会固定在浏览器窗口的顶部。
但是我有一个固定位置的白色徽标区域，下方有一个菜单栏，工具栏出现在它们上方：

我怎样才能让它留在我的固定标题/导航下？

当用户滚动时，我想要一种优雅的方式来“收集”窗口顶部的多级标题，并position:sticky让我到达那里的 90%。下面的代码片段与我希望的一样，但有一个例外：当 Header 2b 到达顶部时，Header 3b 仍然可见。由于标题 3b 是标题 2a 的“子项”，因此我希望它在标题 2b 到达顶部后滚动或以某种方式隐藏。（可以预见，Header 1b 和 Header 2d 都有相同的问题。）

我知道我在这里拥有的是 CSS应该如何工作，但是有没有一种优雅的方式让它按照我的要求工作？我试着给p一个background-color的white和搞乱z-index，但我没有任何运气。

h1, h2, h3 {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

h1 {
  background-color: red;
  height: 35px;
}
h2 {
  background-color: blue;
  height: 25px;
  top: 35px;
}
h3 {
  background-color: green;
  height: 20px;
  top: 60px;
}

<h1>Header 1a</h1>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h2>Header …

a img {
  width:3%;
  text-decoration:none;
  margin-left:10px;
}

a {
    top: 10px;
    left: 10px;
    position: absolute;
    color: #090909;
}

<a href="#">View <img src="https://cdn1.iconfinder.com/data/icons/internet-28/48/31-512.png"> </a>

如何使图像（箭头）5px向右移动，以便margin-left: 15px;在父标签<a>悬停时？如果没有 javascript 或 jquery，这可能吗？

我有一个固定的前三列的表。我的前三列是固定的。我想的是，其余的列应计算它们的height和width自动的基础上，他们的内容。

所以我的 CSS 看起来像这样：

.outer {
    position:relative;
    background-color: hotpink;
}
.inner {
    overflow-x:scroll;
    overflow-y: visible;
    width: calc(100% - 1500px);
    margin-left: 18em;
    background-color: greenyellow;
}

table {
    table-layout: fixed;
    width: 100%;
}

td, th {
    vertical-align: top;
    border-top: 1px solid #ccc;
    padding: 0.8em;
    width: 150px;
    height: 42px;
    word-break: break-all;
}

.col1 {
    position:absolute;
    left: 0em;
    width: 6em;
}

.col2 {
    position:absolute;
    left: 6em;
    width: 6em;
 }

.col3 {
    position:absolute;
    left: 12em;
    width: 6em;
}

.emptyrow {
    position:absolute; …

有没有办法使用 Javascript 或 jQuery 来检测浏览器是否支持position:sticky？

我知道大多数现代浏览器都支持它，但一些旧浏览器和一些移动浏览器不支持。

我对 polyfill 不感兴趣。我只想在有效时才采取某些行动position:sticky，否则就保持原样。

当客户端按下登录按钮时，我想在页面中间创建一个小的登录弹出卡。我设法创建了卡片本身，让它.absolute z-10位于其他内容的顶部。我还将它包裹在一个容器 div 中，.relative以便能够定位卡片。我的问题是我不能把它放在中间。例如.right-0，如果我添加它可以工作，但我想将它放在中间，而我在文档中找不到任何关于它的内容......另外，我如何为我的卡添加更多的高度，即 64？

我的代码：

索引.html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Jófogás</title>
    <link
      href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>
  <body>
    <!-- header section -->
    <header class="bg-white flex">
      <div class="w-3/6">
        <img
          class="h-12 m-4"
          src="./logo_img/jofogas_logo_original.jpg"
          alt="jofogas_logo_original"
        />
      </div>
      <div class="mx-6 my-6 w-3/6 text-right">
        <button class="bg-orange-500 rounded py-2 px-4 text-white">
          Belépés
        </button>
      </div>
    </header>
    <!-- login card -->
    <div class="relative">
      <div class="absolute z-10 items-center right-0">
        <div
          id="login-card"
          class="w-56 …

我们使用 Markdown (Kramdown) 生成静态网站。对于信息框，我们可以对段落进行注释并得到以下结果：

{:.note .icon-check title="This is a title"}
Lorem, ipsum dolor sit amet consectetur adipisicing elit.

这是转换后的 HTML：

{:.note .icon-check title="This is a title"}
Lorem, ipsum dolor sit amet consectetur adipisicing elit.

样式是（SCSS）：

<p class="note icon-check" title="This is a title">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>

由于我们使用的是 Icomoon 图标字体，其中content设置在 中:before，标题必须在 中:after。

• 我们不会改变 Iconfont，所以图标必须留在 :before
• 降价中没有额外的分散注意力的标记，所以没有 HTML 包装器
• 没有Javascript

可以为标题设置绝对定位，但这对于段落文本本身来说太窄了，因为无法设置边距。

这是一个 JSFiddle

现在，如何做一个风格框:after的顶部标题，当看起来也不错没有标题设置 …