标签: css-position

修复相对于浏览器Chrome的HTML页面元素

我正试图在页面的左上角放置一个div,我想让它留在那里,无论浏览器窗口大小调整或页面滚动.

如何使用纯CSS(如果可能)或使用jQuery执行此操作？

html css jquery css-position

Ian*_*Ian

lucky-day

2
推荐指数

1
解决办法

1544
查看次数

目的

当表格单元格悬停在表格单元格的右上角时,会出现一个小的放大镜图标.将鼠标放在放大镜图标上并单击它将打开一个对话框窗口,以显示有关该特定表格单元格中项目的详细信息.我想为数百个表格单元重用相同的图标,而不是每次都重新创建它.

部分解决方案

有一个<span>绝对定位和隐藏的单一.当_previewable表格单元格悬停时,<span>会移动到正确的位置并显示.这<span>也在DOM中移动为_previewable表格单元格的子节点.这使得附加到其<span>上的单击处理程序能够找到_previewable父项,并从其用于填充对话框内容的jquery data()对象中获取信息.

这是我的HTML的一个非常简化的版本:

<body>
    <span id="options">
        <a class="ui-state-default ui-corner-all">
            <span class="ui-icon ui-icon-search"></span>
            Preview
        </a>
    </span>
    <table>
         <tr>
             <td class="_previewable">
                 <img scr="user_1.png"/>
                 <span>Bob Smith</span>
             </td>
        </tr>
   </table>
</body>

Run Code Online (Sandbox Code Playgroud)

这个CSS:

#options {
    position: absolute;
    display: none;
}

Run Code Online (Sandbox Code Playgroud)

有了这个jQuery代码:

var $options = $('#options');
$options.click(function() {
    $item = $(this).parents("._previewable");
    // Show popup based on data in $item.data("id");
    Layout.renderPopup($item.data("id"),$item.data("popup"));               
});

$('._previewable').live('mouseover mouseout',function(event) {
    if (event.type == 'mouseover') { …

Run Code Online (Sandbox Code Playgroud)

jquery css-position live

Tau*_*ren

2010 04-21

2
推荐指数

1
解决办法

4099
查看次数

当我将div的css位置设置为绝对时,背景图像消失了 - 帮助？

我正在尝试在屏幕的顶部和底部实现图形的通用设计.我有一个div,顶部是背景图像,底部是背景图像.没有问题的顶部,但我当然希望'底部'保持在我的页面底部.为此,我设置一个包含div的位置:relative,然后设置'bottom'div {position:absolute; bottom:0;}问题是,只要我将'bottom'div位置设置为绝对值,背景图像就会消失!底部div的高度为40px - 但它是空的.

我上传了两个版本:图片显示但令人讨厌的定位www.NottsGuitar.co.uk 绝对定位:www.NottsGuitar.co.uk/indexabsolute.php

css css-position background-image

Sim*_*son

lucky-day

2
推荐指数

1
解决办法

3774
查看次数

非常基本的HTML格式

我把头发拉到这里.我只想要两个div并排包含内容,根据内容调整div和它们包含的div,所有内容都可见,没有滚动.

以下标记不是我的网站,但我写了它来展示我想要的东西:

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>

<style>

#outer{
    width:400px;
}

#innerleft{
    width:200px;
    float:left;
}

#innerright{
    width:200px;
    color:#900;
    float:left;
}

</style>

</head>
<body>

<div id="outer">
    <div id="innerleft">
        sdgfjfdbvkjfdbvkjfdbvkjdfbvkjdfbvkjdfbvkjdbvkjdfbvkjdfbvkjdfbvkjdfbvkjdfbjkfbvjkdfbdfkjdfbjkfdbkjdfjvfjkbfvbjkfvkjbvbfjdjdfdfbdfj
    </div>
    <div id="innerright">
        dsufbjksvkudfsvkdfubvjkdfhbvkhdfbvksdbvkjsdbvkjdsbvkjsbdvkjbsdvkjbsdkjvbskjvbsdkjvbskdjbvksdbvksdjvbkjdsbvkjsbvkjsdbvkjdsbvkjdsksbdjv
    </div>
</div>


</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我似乎已经尝试了一切!

html css css-position css-float

Ada*_*ite

2012 05-12

2
推荐指数

1
解决办法

88
查看次数

如何相对于父边框的外边缘定位元素？

我试图将四个元素放在父元素的四个角上.父元素有一个边框,其大小动态变化.我想定位元素,使它们触及边框的外边缘,最好是这样做,以便在边框改变大小时我不必担心做某事.

使用绝对定位,我能够让它们相对于边界内部定位:http://jsfiddle.net/V5jFx/1/

然而,我无法弄清楚如何相对于外部做到这一点.

这四个角元素不是父元素的子元素,并且我愿意使用javascript,但我真的更愿意不必检测边框大小的变化.

javascript css jquery css-position

jos*_*osh

lucky-day

2
推荐指数

1
解决办法

295
查看次数

使用具有null布局的JPanel

所以我有一个叫做CalendarPanel扩展的类JPanel.它使用null布局.我如何CalendarPanel用作常规组件？当我把它放在另一个JPanel然后将其添加到窗口时,它会消失.它只有在我直接添加到窗口时才可见.

编辑:是的,我意识到使用JPanelnull布局是不好的做法.CalendarPanel实际上是别人的代码,我试图将它用于我的目的,而不必重构它.

java swing css-position layout-manager null-layout-manager

Joe*_*hel

2013 02-21

2
推荐指数

2
解决办法

2万
查看次数

如何将固定位置元素限制为浏览器窗口的高度？

我有一个带固定位置侧边栏的页面.我希望侧边栏在其内容太高而无法放入浏览器窗口的情况下可滚动.

但是,当我使用侧边栏设置样式时overflow-y: scroll,滚动条会显示但是已禁用,因为侧边栏足够高,可以容纳所有内容,即使它对于浏览器窗口来说太高了.

有没有办法限制固定位置元素的高度,使其在内容扩展到浏览器窗口底部以下时滚动？

我的应用程序可以使用jQuery解决方案.请注意,侧边栏不会一直延伸到窗口顶部.

http://jsfiddle.net/nA8z4/

http://jsbin.com/iqibew/2:此版本显示标题,侧栏必须显示在下方.

html javascript css jquery css-position

Jon*_*ood

2013 03-27

2
推荐指数

1
解决办法

5228
查看次数

文字背后的图像

我想在H1标签后面显示图像,我还希望图像宽度拉伸到与文本相同的宽度.

我的代码:

<div style="display: inline;">
    <img src="http://img585.imageshack.us/img585/3989/m744.png" width="100%" height="68" />
    <h1 style="position: absolute; top: 0px;">Variable length text</h1>
</div>

Run Code Online (Sandbox Code Playgroud)

JSFiddle:http://jsfiddle.net/Aykng/

目前的外观:

目前的外观

期望的外观:

期望的外观

图像宽度应该拉伸或收缩以填充div,我该如何实现？

我希望它与IE 7+兼容,否则我只会使用background-image和background-size.

html css css-position

Dra*_*cir

2013 08-26

2
推荐指数

1
解决办法

4万
查看次数

绝对定位会给IE/Chrome带来麻烦

我的网站上有一个画廊.切换所显示照片的一种方法是按下图库底部的小图像(如下图所示).为了定位小图像,我使用绝对定位和边距,根据需要使它们笔直.问题是,当我在chrome中使用绝对定位时,图像的默认位置从中间开始(因此,为了定位第一个图像(1),我将其指定为'margin-right:-395px;'.在IE中, image的dafault positiong从它应该的位置开始:所以'-395px'使图像向右移动,图像显示得很糟糕.

Chrome中的按钮位于右上角也是如此.

这是我的网站,如果您使用这两种不同的浏览器进行检查(我还没有检查其他浏览器),您可以看到问题所在.图像也在下面添加.

铬:

资源管理器: IE浏览器

第一个小图像的CSS :(第二个图像:向右边缘添加100,第三个图像:添加200)

height:90px;
width:90px;
margin-top:5px;
position:absolute;
opacity:0.6;
filter:alpha(opacity=60);
border-radius:5px;
cursor:pointer;
margin-right:-395px;

Run Code Online (Sandbox Code Playgroud)

css internet-explorer google-chrome margin css-position

Ori*_*uss

lucky-day

2
推荐指数

1
解决办法

2万
查看次数

位置:固定重叠页面

这是小提琴.我正在制作一个购物清单网络应用程序,我正在使顶级div成为一个固定的位置.当我这样做时,div似乎与页面的其余部分重叠.我已经尝试在css(position: relative; position: fixed)中使用两个位置,但这不会让div保持固定.

CSS(对于div):

#top {
    width: 100%;
    height: 40px;
    background: #96f226;
    text-align: center;
    font-size: 30px;
    color: #252525;
    position: relative;
    position: fixed;
}

Run Code Online (Sandbox Code Playgroud)

HTML(对于div):