positioning

Why does setting the `right` CSS attribute push an element to the left?

由 三世轮回 提交于 2019-12-11 04:25:21
问题 I have a very basic page with two elements, an outer green box, and inner blue box. I am confused as to why setting the right attribute on the inner box would move it to the left? Furthermore I am confused as to why right:0 would not align the boxes right edge to the right edge of the parent box? Here is my short example page... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> #outer

Positioning the element second time using JQuery UI's position does not work as expcted

由 ↘锁芯ラ 提交于 2019-12-11 01:14:38
问题 Here is my fiddle: http://jsfiddle.net/Ya3w7/2/ HTML: <img src="http://cdn.tacky.me/m/static/settings16.png" class="settings-icon"/> <div id="control-panel"> <img src="http://cdn.tacky.me/m/static/settings16.png" /> <a href="#" style="float:right" id="close-cp">X</a> <div class="link_container"><a href="#">Show Profile</a></div> </div> CSS: .settings-icon { margin: 100px; cursor: pointer; } #control-panel { position: absolute; height: auto; width: auto; top: 0; left: 0; background-color: #fff

Using javascript, how to get the position of an element

由 Deadly 提交于 2019-12-10 21:44:11
问题 like the title says, how to get the element's x, y positions with respect to their location in the web page and their positioning schemes like absolute, relative etc. 回答1: In a modern browser, getBoundingClientRect and getClientRects will give you rect objects describing your element. See https://developer.mozilla.org/en/DOM/element.getBoundingClientRect and https://developer.mozilla.org/en/DOM/element.getClientRects If you have to work with IE8, then you'll have to do different things in

CSS positioning relative over fixed/absolute

由 亡梦爱人 提交于 2019-12-10 19:03:26
问题 Apologies if I appear quite "noobish" with CSS. I've been trying to set the following... #0 { width: 100%; height: y; border: 1px solid black; } #a { position: fixed; float left; width: x; height: y; border: 1px solid black; } #b { position: relative; float: left; width: x; height: y; border-right: 1px solid black; } /* HTML */ <div id="0">Some div...</div> <div id="a">Another div</div> <div id="b">Final div...</div> For some reason, if I attempt to position #b below #a, #b will appear ontop

How to split two containers in 60% / 40% and position text at the bottom of a container in Flutter?

由 蹲街弑〆低调 提交于 2019-12-10 18:59:52
问题 I am trying to create something similar like the image below, where there are two containers, one that takes 40% of the screen and the other one the rest of the screen. In the top container I would like to have a text at the top and one at the bottom, left aligned. I have this: // main page body body: Container( child: Column( children: [ // top container new Expanded( child: null, // todo, add the two texts, ), // bottom container new Container( height: 400.0, // this needs to be 60% of the

Recalculating absolute positioned elements position?

由 别等时光非礼了梦想. 提交于 2019-12-10 18:54:10
问题 I have some elements positioned absolutely, relative to document body. When something is appended, somewhere inside DOM, then absolute positioned elements should be repositioned as well. The question is, how to know that DOM was changed somewhere there inside? The second idea was to listen to document height and width changes, which i think is the most efficient way to do it. Are there any other ways to accomplish that? UPDATE http://jsfiddle.net/9nkq9/ 回答1: Do the absolutely positioned

offsetParent() in jQuery not returning expected relative-positioned ancestor

由 北城余情 提交于 2019-12-10 17:22:52
问题 I have some HTML with the following approximate structure and positioning: <div class="grand-parent" style="position: absolute"> <div class="parent" style="position: relative"> <div class="child"></div> </div> </div> In my jQuery widget, I'm trying to insert an element that is located inside the "offset parent" of the element targeted by the widget. To do so, I essentially have code like this: var targetElement = $('.child'); $('<div/>').appendTo(targetElement.offsetParent()); Unfortunately,

Display text outside of containing element

由 …衆ロ難τιáo~ 提交于 2019-12-10 16:58:31
问题 I want to achieve this. Keep an eye on the top text 'Happy Fruit' . I want to be overlayed of the box while it's nested inside it. body { background: yellow; padding: 50px; } .slider { width: 100%; height: 650px; margin-top: 40px; background: orange; box-shadow: 0 0 78px 11px #F3286B; } h1, h2 { text-transform:uppercase; color: red; } h1 { font-size: 11vw; } h2 { font-size: 7vw; } <body> <div class="slider"> <h1> Happy Fruit </h1> <h2> HELLO WORLD </h2> </div> </body> If I then go and add a

absolute DIV positioning with mozilla V.S. safari V.S. Chrome V.S. IE

由 ∥☆過路亽．° 提交于 2019-12-10 12:21:58
问题 I'm having trouble with the browser compatible div positioning. I'm doing an image map with buttons on top of it in separate div's. These div's tend to move around in firefox, in safari and chrome everything is okay. They tend to move down a bit. Changing the doctype seems to influence the rendering in firefox. But none of the doctype's seem to work. Check the Algiers button on this link in firefox and you'll see what I mean. http://kareldc.com/grimonprez/index_js_animatie_clicks.html Any

How to place a relative element after an absolute element and cause parent div to expand to fit children?

由 有些话、适合烂在心里 提交于 2019-12-10 10:42:50
问题 I'm trying to understand css, so I tried my best to make my experimental code below as generic as possible. I have a simple page, with two boxes, I wanted one of the boxes to be positioned a certain way which according to Why does setting the `right` CSS attribute push an element to the left? requires me to set its position like so position:absolute However, I now want to add some divs which fall below my absolute div, furthermore I would like the parent div to expand to fit the size of the
订阅 positioning