Question

我正在尝试将搜索栏放在图像的右侧。搜索栏默认为图像的左侧，我希望它位于右侧。

我会认为

＆＃13;

searchBar.style.right = "200px";

＆＃13;

应该有效，但事实并非如此。

以下是图片和搜索栏的完整代码：

＆＃13;

function loadHeader() {
	/* Header bar */
	var headerImage = new Image(); 
	headerImage.id = "hi";
	headerImage.src = "headerBar.jpg";
	headerImage.style.position = "absolute";	
	headerImage.style.top = "0px";
	headerImage.style.left = "0px";
	headerImage.style.zIndex = -1;
	headerImageWidth = (window.innerWidth);
	headerImage.width = headerImageWidth;
	headerImageHeight = 40;
	headerImage.height = headerImageHeight;
	document.body.appendChild(headerImage);
	
	/* Search bar */
	var searchForm = document.createElement("form");
	searchForm.setAttribute("action", "/search");
	searchForm.setAttribute("method", "POST");

	var searchBar = document.createElement("input");
	searchBar.id = "sb";
	searchBar.setAttribute("type", "text");
	searchBar.setAttribute("placeholder", "Search");
	searchBar.position = "absolute";
	searchBar.left = "500px";
	searchBar.style.zIndex = 0;
	searchBar.width = 150;
	searchBar.height = 20;	

	searchForm.appendChild(searchBar);

	document.body.appendChild(searchForm);
}

＆＃13;

Answer 1

设置right属性必须与position:absolute，position:fixed或position:relative一起使用。

使用absolute：元素将相对于第一个定位祖先的位置。

使用fixed：元素将相对于视口位置。

使用relative：元素将相对于它在流程中的正常位置的位置。

https://developer.mozilla.org/en-US/docs/Web/CSS/position

标题图像右侧的倾斜位置搜索栏

1 个答案: