标签: css-position
滚动到该div后如何使div固定？
div滚动到那个后如何保持固定div？我有一个div稍后在页面中,你需要滚动才能达到目的div.
如果我使用:
.divname {
position: fixed;
}
在div出现之前就应该正常显示.也许我需要的一个很好的例子是关于9gag的第二个广告.如果您的屏幕分辨率足够低,则在加载首页后您将看不到该广告,但在向下滚动后,您会看到第二个广告,并在向下滚动时保持固定状态.
推荐指数
解决办法
查看次数
如何使div的百分比宽度相对于父div而不是视口
<div id="outer" style="min-width: 2000px; min-height: 1000px; background: #3e3e3e;">
<div id="inner" style="left: 1%; top: 45px; width: 50%; height: auto; position: absolute; z-index: 1;">
<div style="background: #efffef; position: absolute; height: 400px; right: 0px; left: 0px;"></div>
</div>
</div>我想要发生的是内部div占用给予其父div(外部)50%的空间.相反,它正在获得视口可用空间的50%,这意味着随着浏览器/视口的大小缩小,它也会缩小.
鉴于外div有min-width的2000px,我希望内部的div至少1000px宽.
推荐指数
解决办法
查看次数
bootstrap popover:高级定位
我正在尝试为一个触发器定位一个twitter-bootstrap popover,该触发器位于960px宽网页的最右上角.理想情况下,我将它放在底部并用CSS移动箭头(因此箭头位于弹出窗口的右上角).
不幸的是,"放置":"底部"定位是不够的,因为它会将其置于触发器下方.
我正在寻找能够将弹出窗口静态放置在触发器左下方的解决方案.我读了很多问题,却找不到任何问题.
提示？
推荐指数
解决办法
查看次数
当position:fixed应用时,是否可以保持父元素的宽度？
当我们应用于position:fixed一个元素时,它被取出文档的正常流程,因此它不尊重它的父元素宽度.如果将其声明为百分比,是否有办法使其继承父级的宽度？(下面的工作用例)
let widthis = $('.box').width();
$('.dimensions').text(`width is ${widthis}`);
$('button').on('click', function() {
$('.box').toggleClass('fixed');
let widthis = $('.box').width();
$('.dimensions').text(`width is ${widthis}`);
});.container {
max-width: 500px;
height: 1000px;
}
.box {
background-color: lightgreen;
}
.fixed {
position: fixed;
}
.col-1 {
border: 1px solid red;
float: left;
width: 29%;
}
.col-2 {
border: 1px solid pink;
float: left;
width: 69%;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click this to toggle position fixed for the …推荐指数
解决办法
查看次数
浏览器滚动条在我的固定div下
我有一个100%宽度的固定标题.
#header {
background: #2e2e2e;
width: 100%;
z-index: 999;
position: fixed;
}
浏览器滚动条在我的固定div下.如何解决？
推荐指数
解决办法
查看次数
CSS简写定位
有什么简写为top right bottom left或为width和height？
我有很多像这样的CSS
#topDiv {
position:absolute;
top:0px;
left:0px;
right:0px;
height:100px;
}
#centerDiv {
position:absolute;
top:100px;
bottom:120px;
left:0px;
right:0px;
}
#consoleDiv {
position:absolute;
left:0px;
right:0px;
bottom:0px;
height:120px;
}
我想做这样的事情
position: absolute 10px 50px 50px 100px;
要么
size: 400px 200px;
推荐指数
解决办法
查看次数
CSS绝对居中
最近我遇到过这种用于将元素水平和垂直定位到中心的方法.但是,我无法弄清楚每个房产的作用.有人能够向我解释对设置的影响是什么top:0, bottom:0, left:0, right:0？
(如果您能够使用外行术语来解释它或提供说明性图像,那将会很棒.)
另外,将显示设置为表格的用途是什么？
.absolute-center {
position: absolute;
display: table;
height: auto;
width: 500px;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
border: solid 1px red;
}<p class="absolute-center">What is this sorcery?</p>推荐指数
解决办法
查看次数
gmail电子邮件中的绝对定位
我有一个客户想要向在他们网站上注册的人发送礼券.他们希望这一切都是设计出来的,所以我不能只发送短信.我正在尝试将文本放在图像上,以便它仍然可以是动态的.
我试图用绝对定位做到这一点.一些电子邮件系统喜欢它.有些人讨厌它.Gmail恰好讨厌它.
我们正在使用MailChimp进行广告系列.这是电子邮件的完整来源.以下只是不起作用的片段.
<html>
<head>
<!-- This is a simple example template that you can edit to create your own custom templates -->
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>*|MC:SUBJECT|*</title>
<style type="text/css">body{background-color:#bab145;text-align:center;}#layout{border:5px solid #999999;background:#ffffff;margin:10px auto;text-align:left;}#header{background-color:#cccccc;padding:0px;color:#333333;font-size:30px;font-family:Georgia;text-align:left;}#content{font-size:13px;color:#4d4d4d;font-family:Helvetica;line-height:1.25em;padding:10px 30px;}.primary-heading{font-size:28px;font-weight:bold;color:#8b0000;font-family:Georgia;line-height:150%;margin:25px 0 0 0;}.secondary-heading{font-size:20px;font-weight:bold;color:#000000;font-style:normal;font-family:Georgia;margin:25px 0 5px 0;}#footer{background-color:#eeeeee;border-top:0px none #ffffff;padding:20px;font-size:10px;color:#333333;line-height:100%;font-family:Verdana;}#footer a{color:#800000;text-decoration:underline;font-weight:normal;}a,a:link,a:visited{color:#800000;text-decoration:underline;font-weight:normal;}</style></head>
<body style="background-color: #bab145;text-align: center;">
<table id="layout" border="0" cellspacing="0" cellpadding="0" width="600" style="border: 5px solid #999999;background: #ffffff;margin: 10px auto;text-align: left;">
<tr>
<td id="content" style="font-size: 13px;color: #4d4d4d;font-family: Helvetica;line-height: 1.25em;padding: 10px 30px;"><div style="height:243px; width: 500px; position: relative;">
<img src="http://getfreepellets.com/images/GC_flat.jpg" style="position: absolute;"> …推荐指数
解决办法
查看次数
在CSS中相对于另一个元素定位一个元素
我想把四个div相对于另一个定位.我有一个矩形div,我想div在它的角落插入4 秒.我知道CSS有一个属性"position:relative",但这与该元素的正常位置有关.我想把我的divs 定位为不是相对于它们的正常位置,而是相对于另一个元素(矩形).我该怎么办？
推荐指数
解决办法
查看次数
如何在引导程序中使用固定标题(navbar)向下滚动表行时,将表头(thead)粘贴在顶部？
Bootstrap布局fixed-navbar.桌子上有很多行.
问题？当我滚动页面导航栏将在那里,因为它是固定的.当我滚动更多我希望表头在导航栏下修复,表(table-body)的内容滚动没有滚动条!
像这样的东西 - Codepen
**小提琴**引导表
在提到答案之后工作小提琴!
HTML
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something …推荐指数
解决办法
查看次数
标签 统计
css ×10
css-position ×10
html ×3
css3 ×2
javascript ×2
gmail ×1
html-table ×1
popover ×1
position ×1
scroll ×1
width ×1