标签: css-position

使用jQuery显示相对于另一个元素的元素

我正在开发一个界面,要求用户可以单击按钮,然后我将显示相对于按钮定位的浮动div(您可以将其视为当您单击向下箭头时显示的区域下拉列表).

如何正确定位此浮动元素与单击的按钮(可能位于页面上的任何位置)相邻？

提前致谢!!

jquery dhtml css-position

Joe*_*nez

lucky-day

2
推荐指数

1
解决办法

2786
查看次数

根据滚动位置固定切换位置

我有以下代码,它修复了菜单的位置,它将滚动到页面顶部.

$(function () {
    var msie6 = $.browser == 'msie' && $.browser.version < 7;
    if (!msie6) {
    var top = $('.menu').offset().top - parseFloat($('.menu').css('margin-top').replace(/auto/, 0));
    $(window).scroll(function (event) {
    var y = $(this).scrollTop();
    if (y >= top) {
    $('.menu').addClass('fixed');
    } else {
    $('.menu').removeClass('fixed');
    }
    });
    }
});

Run Code Online (Sandbox Code Playgroud)

CSS

.container {
    width:400px; 
    margin:auto;
}

.header {
    background-color:#096; 
    height:150px;
}

.fixed {
    position:fixed;
    top:0px;
    left:50%;
    margin-left:50px;
}

.bodyContainer {
    overflow:hidden;
}

.menu {
    float:right; 
    width:150px; 
    height:250px; 
    background-color:#F00;
}

.bodyCopy {
    float:left; 
    width:250px; 
    height:1000px;
} …

Run Code Online (Sandbox Code Playgroud)

javascript jquery css-position

Tom*_*Tom

lucky-day

2
推荐指数

1
解决办法

1万
查看次数

绝对定位和左/右浮动

这显然是矛盾的.我需要的是让两个子元素位于父元素的左边缘和右边缘,同时垂直居中并覆盖所有其他兄弟元素.

css css-position css-float

DMI*_*MIL

2012 04-12

2
推荐指数

1
解决办法

3万
查看次数

位置:固定在菜单栏上 - 希望简单

我试图让顶部菜单栏浮动在页面顶部:

http://www.landedhouses.co.uk/

因此,当用户向下滚动时,仍然显示菜单.

不幸的是添加位置:固定到CSS似乎没有做的伎俩,各种元素仍然浮动.谁能指出我正确的方向？

html css css-position menubar

Edm*_*und

2012 05-06

2
推荐指数

1
解决办法

2642
查看次数

我正在尝试通过制作拼图程序来提高我对Java的理解,特别是Java GUI.目前,用户选择图像,该图像被切割成指定数量的片段.这些碎片被随机地绘制到屏幕上,但它们似乎被其他部分的空白部分覆盖,并不是所有部分都显示出来,但我可以打印出所有坐标.我使用绝对定位,因为LayoutManager似乎不起作用.我简单地试过了layeredPanes,但是他们让我困惑,似乎没有解决问题.我真的很感激一些帮助.
以下是2个相关课程:

import javax.swing.*;
import java.awt.*;
import java.awt.image.*;
import java.awt.event.*;

public class PuzzlePieceDriver extends JFrame
{
  private static Dimension SCREENSIZE = Toolkit.getDefaultToolkit().getScreenSize();
  private static final int HEIGHT = SCREENSIZE.height;
  private static final int WIDTH = SCREENSIZE.width;

  public static int MY_WIDTH;
  public static int MY_HEIGHT;

  private static BufferedImage image;


  private int xPieces = PuzzleMagicDriver.getXPieces();
  private int yPieces = PuzzleMagicDriver.getYPieces();

  private PuzzlePiece[] puzzle = new PuzzlePiece[xPieces*yPieces];

  public Container pane = this.getContentPane();
  private JLayeredPane layeredPane = new JLayeredPane();


  public PuzzlePieceDriver(ImageIcon myPuzzleImage)
  { …

Run Code Online (Sandbox Code Playgroud)

java graphics css-position jpanel jframe

foo*_*ish

lucky-day

2
推荐指数

1
解决办法

2608
查看次数

在流体布局twitter bootstrap中修复了右边的边栏

我想在我的网站右侧创建一个修复侧边栏但是当我给style="position:fixed;"它的div时它只是完全在左边.

<div class="span2" style="position:fixed; background-color: white;">  
CONTENT 
</div>

Run Code Online (Sandbox Code Playgroud)

我怎么做？我应该为项目的每个分辨率赋予像素位置以保持响应吗？

sidebar css-position fluid-layout twitter-bootstrap

FMV*_*FMV

2012 08-21

2
推荐指数

1
解决办法

2万
查看次数

覆盖Google Maps将搜索框样式设置为jqm

我正在尝试将Google Maps地方搜索框集成到我的jQuery Mobile App中。

我在jQuery Mobile中创建了具有首选样式的搜索框。我想使用此搜索框而不是标准的Google搜索框。但是由于某些原因，我的搜索框样式已被Google Maps搜索框样式所取代，如您在下图（1）中看到的。有人可以建议我一种方法来达到理想的效果，如图2所示。也请找到我的完整代码。我会感谢任何人的帮助。

在此处输入图片说明

下图（2）显示了我要实现的目标。

所需的位置框样式

完整的代码

<!DOCTYPE html>

<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
    <!-- Google maps source for places seearch box and map display on page initilization-->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

    <style>
        #map-page, #map_canvas { width: 100%; height: 80%; padding: 0; }

        .container_16, #set_location {
        z-index:1;
        }

        .container_16 .alpha { clear-left: 0; }

        .grid_3,.grid_13{ margin: 0; padding: 1.5% !important; border: 0; float: left; }

        .container_16 { overflow: …

Run Code Online (Sandbox Code Playgroud)

css google-maps css-position google-maps-api-3 jquery-mobile

use*_*776

lucky-day

2
推荐指数

1
解决办法

2057
查看次数

CSS - 父级结尾处的绝对定位元素,而不知道它的高度？

假设我们有这样的HTML

<div class="at-end-holder">
   Lorem ipsum dolor sit amet...
  <img src="http://placehold.it/350x150" class="at-end">
</div>

Run Code Online (Sandbox Code Playgroud)

我们希望图像的上边缘与其父母的下边缘相吻合.

如果我们知道图像高度(让我们说它的150px),那么我们可以设置bottom: -150px.但是,如果我们不知道它的高度呢？

我不希望使用JS.我的意思是 - 我没有.

这是一个游乐场.根据需要,底部的外观看起来很不寻常,但我认为在那里我知道图像高度.

html css css-position

pie*_*e6k

lucky-day

2
推荐指数

1
解决办法

486
查看次数

位置绝对是否使该元素成为包含块？

在css2.1规范,w3.org中,有一个例子解释了如何形成包含块的方式.

<P id="p2">This is text 
    <EM id="em1"> 
        in the
        <STRONG id="strong1">second</STRONG> 
        paragraph.
    </EM>
</P>

Run Code Online (Sandbox Code Playgroud)

当位置em为静态时,strong包含块的p位置由建立,但当位置em为绝对时,strong包含块的位置由建立em.

我查看有关包含块的章节,但无法确定绝对位置是否会形成新的包含块.有什么东西我不见了吗？

html css css-position

eve*_*ill

2017 01-11

2
推荐指数

1
解决办法

161
查看次数

'position:bottom'不适用于相对定位的按钮元素

目标:将button元素固定到元素的底部main.我试着用相对定位定位它的容器,所以它粘在底部:

/* POSITIONING NOT WORKING. I WANT THIS DIV FIXED TO BOTTOM OF PARENT */
.wrapper:nth-child( 4 ) {
  background-color: #bbb;
  position: relative;
  bottom: 0;
}

Run Code Online (Sandbox Code Playgroud)

这根本不是移动.wrapperdiv.想法？

@import url( "https://necolas.github.io/normalize.css/latest/normalize.css" );
* {
  box-sizing: border-box;
}
main {
  background-color: #eee;
}
main, input {
  padding: 2%;
}
main input {
  width: 100%;
  margin: 5% 0;
  border: 0;
}
.clr-fix::after {
  content: "";
  display: block;
  clear: both;
}
.wrapper {
  width: 23%;
  margin: 1%; …

Run Code Online (Sandbox Code Playgroud)

html css position css-position

sol*_*yon

2017 03-21

2
推荐指数

1
解决办法

7622
查看次数